How to add Tailwind CSS to Preact CLI

Add Tailwind CSS to an existing Preact CLI application through PostCSS.

The steps documented here were executed with the latest release of preact-cli:

• preact-cli 2.1.0
• preact 8.5.2

Install Tailwind:

yarn add -D tailwindcss 

Generate a tailwindcss config:

npx tailwind init

In your app folder create the file preact.config.js if you don't have one yet. Add to it the following code:

  const results = helpers.getLoadersByName(config, 'postcss-loader');
  for (const result of results) {
    result.loader.options.plugins = [
      tailwindcss('./tailwind.config.js'),
      // other postcss plugins can be added here
      ...result.loader.options.plugins
    ];
  }

You'll notice that the config object is the Webpack config and that you can just mess with it directly, instead of using getLoadersByName. However, it is usually better to stick to the public APIs that Preact CLI offers, or any tool. So that upgrades are easier in the future.

Now you can create your own classes using Tailwind's utilities:

.some-class {
  @apply text-gray-700;
}

Full code example: add tailinwdcss through postcss