PostCSS प्लगइन

UnoCSS के लिए PostCSS प्लगइन। @apply, @screen और theme() निर्देशों का समर्थन करता है।

स्रोत कोड

WARNING

यह पैकेज अभी एक प्रयोगात्मक स्थिति में है। यह semver का पालन नहीं करता है, और पैच संस्करणों में ब्रेकिंग बदलाव ला सकता है।

इंस्टॉल

pnpm

pnpm add -D unocss @unocss/postcss

yarn

yarn add -D unocss @unocss/postcss

npm

npm install -D unocss @unocss/postcss

bun

bun add -D unocss @unocss/postcss

import UnoCSS from '@unocss/postcss'

export default {
  plugins: [
    UnoCSS(),
  ],
}

import { defineConfig, presetWind3 } from 'unocss'

export default defineConfig({
  content: {
    filesystem: [
      '**/*.{html,js,ts,jsx,tsx,vue,svelte,astro}',
    ],
  },
  presets: [
    presetWind3(),
  ],
})

@unocss;

उपयोग

@unocss

@unocss at-rule एक प्लेसहोल्डर है। यह उत्पन्न CSS द्वारा प्रतिस्थापित किया जाएगा।

आप प्रत्येक लेयर को व्यक्तिगत रूप से भी इंजेक्ट कर सकते हैं:

@unocss preflights;
@unocss default;

/*
  Fallback layer. यह हमेशा शामिल करने की अनुशंसा की जाती है।
  केवल अप्रयुक्त लेयर ही यहाँ इंजेक्ट की जाएंगी।
*/
@unocss;

यदि आप चाहते हैं कि सभी लेयर शामिल हों, चाहे वे पहले से शामिल हों या नहीं, तो आप @unocss all का उपयोग कर सकते हैं। यह उपयोगी है यदि आप उत्पन्न CSS को कई फ़ाइलों में शामिल करना चाहते हैं।

@unocss all;

@apply

.custom-div {
  @apply text-center my-0 font-medium;
}

इसके लिए रूपांतरित किया जाएगा:

.custom-div {
  margin-top: 0rem;
  margin-bottom: 0rem;
  text-align: center;
  font-weight: 500;
}

@screen

@screen निर्देश आपको मीडिया क्वेरी बनाने की अनुमति देता है जो आपके ब्रेकपॉइंट्स को नाम से संदर्भित करते हैं जो theme.breakpoints से आते हैं।

.grid {
  @apply grid grid-cols-2;
}
@screen xs {
  .grid {
    @apply grid-cols-1;
  }
}
@screen sm {
  .grid {
    @apply grid-cols-3;
  }
}
/* ... */

इसके लिए रूपांतरित किया जाएगा:

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 320px) {
  .grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
@media (min-width: 640px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* ... */

ब्रेकपॉइंट वेरिएंट समर्थन

@screen lt、at वेरिएंट्स का भी समर्थन करता है

@screen lt

.grid {
  @apply grid grid-cols-2;
}
@screen lt-xs {
  .grid {
    @apply grid-cols-1;
  }
}
@screen lt-sm {
  .grid {
    @apply grid-cols-3;
  }
}
/* ... */

इसके लिए रूपांतरित किया जाएगा:

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 319.9px) {
  .grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
@media (max-width: 639.9px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* ... */

@screen at

.grid {
  @apply grid grid-cols-2;
}
@screen at-xs {
  .grid {
    @apply grid-cols-1;
  }
}
@screen at-xl {
  .grid {
    @apply grid-cols-3;
  }
}
@screen at-xxl {
  .grid {
    @apply grid-cols-4;
  }
}
/* ... */

इसके लिए रूपांतरित किया जाएगा:

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 320px) and (max-width: 639.9px) {
  .grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) and (max-width: 1535.9px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1536px) {
  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* ... */

theme()

डॉट नोटेशन का उपयोग करके अपने थीम कॉन्फ़िगरेशन मानों तक पहुँचने के लिए theme() फ़ंक्शन का उपयोग करें।

.btn-blue {
  background-color: theme('colors.blue.500');
}

इसके लिए संकलित किया जाएगा:

.btn-blue {
  background-color: #3b82f6;
}