jeroengerits/postcss-tailwind-extra-directives

postcss-tailwind-extra-directives

PostCSS plugin that adds extra directives to CSS (such as hover, dark, etc...).

This is an experimental plugin that requires more research.

Basic Usage

.myClass {
  @dark bg-gray-900 text-gray-100;
}

Outputs:

.myClass {
  @apply dark:bg-gray-900 dark:text-gray-100;
}

Getting Started

Step 1: Install plugin:

npm install --save-dev postcss-tailwind-extra-directives

or with Yarn

yarn add -D postcss-tailwind-extra-directives

Step 2: Add the plugin to plugins list inside postcss.config.js:

module.exports = {
  plugins: {
+   "postcss-tailwind-extra-directives": {},
    tailwindcss: {},
    autoprefixer: {},
  },
};

Features

Multiple Directives

Combine directives by using the : operator.

.myClass {
  @dark:hover:active bg-gray-800 text-gray-200;
}

Outputs:

.myClass {
  @apply dark:hover:active:bg-gray-800 dark:hover:active:text-gray-200;
}

List of all available directives

@hover @focus @focus-within @focus-visible @active @visited @target @first @last @only @odd @even @first-of-type @last-of-type @only-of-type @empty @disabled @checked @indeterminate @in-range @out-of-range @default @required @valid @invalid @placeholder-shown @autofill @read-only @open @before @after @first-letter @first-line @marker @selection @file @dark @portrait @landscape @motion-safe @motion-reduce @placeholder @sm @md @lg @xl @2xl @print @rtl @ltr