PostCSS Plugin

PostCSS plugin for UnoCSS. Supports @apply, @screen and theme() directives.

WARNING

This package is in an experimental state right now. It doesn't follow semver, and may introduce breaking changes in patch versions.

Install

pnpmyarnnpmbun

bash

pnpm add -D unocss @unocss/postcss

bash

yarn add -D unocss @unocss/postcss

bash

npm install -D unocss @unocss/postcss

bash

bun add -D unocss @unocss/postcss

postcss.config.mjs

import UnoCSS from '@unocss/postcss'

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

uno.config.ts

import { defineConfig, presetWind3 } from 'unocss'

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

style.css

css

@unocss;

Usage

`@unocss`

@unocss at-rule is a placeholder. It will be replaced by the generated CSS.

You can also inject each layer individually:

style.css

css

@unocss preflights;
@unocss default;

/*
  Fallback layer. It's always recommended to include.
  Only unused layers will be injected here.
*/
@unocss;

If you want to include all layers no matter whether they are previously included or not, you can use @unocss all. This is useful if you want to include generated CSS in multiple files.

css

@unocss all;

Or if you want to exclude a specific layer, you can use the @unocss !<layer> directive:

css

@unocss !preflights, !<other-layer>;

`@apply`

css

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

Will be transformed to:

css

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

`@screen`

The @screen directive allows you to create media queries that reference your breakpoints by name comes from theme.breakpoints.

css

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

Will be transformed to:

css

.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));
  }
}
/* ... */

Breakpoint Variant Support

@screen also supports ltat variants

`@screen lt`

css

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

Will be transformed to:

css

.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`

css

.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;
  }
}
/* ... */

Will be transformed to:

css

.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()`

Use the theme() function to access your theme config values using dot notation.

css

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

Will be compiled to:

css

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

Suggest changes to this page

Last updated:

Guides

Integrations

PostCSS Plugin

Install

Usage

`@unocss`

`@apply`

`@screen`

Breakpoint Variant Support

`@screen lt`

`@screen at`

`theme()`