Configuring Preact CLI with Tailwind CSS

Tailwind CSS is a utility first CSS framework for building custom web designs.

The utility consists of a lot of CSS classes and is usually configured via PostCSS to include these class names and styles into the project.

Skip to the end if you just want to use a plugin

Here, we will look at how to go about this configuration on a project generated with Preact CLI.

Step 1

Setup Preact CLI project

npx preact-cli create default my-project

Step 2

Installing Tailwind CSS.

npm i tailwindcss

# OR

yarn add tailwindcss

Step 3

Configuring PostCSS loader to use Tailwind.

PreactCLI default setup already uses PostCSS and to keep using the same loaders we have to modify the existing configuration. Fortunately for us, this is pretty easy with Preact CLI.

Create a preact.config.js at the root of your application.

Preact CLI exposes a bunch of helper functions to help us manipulate the configuration and here we will use getLoadersByName to access all instances of PostCSS loader in the configuration.

module.exports = (config, env, helpers) => {
  const postCssLoaders = helpers.getLoadersByName(config, 'postcss-loader');
  postCssLoaders.forEach(({ loader }) => {
    const plugins = loader.options.plugins;

    // Add tailwind css at the top.
    plugins.unshift(require('tailwindcss'));
  });
  return config;
};

Now that Tailwind is added to the PostCSS configuration, you can follow the Step 2 and Step 3 on Getting Started page on Tailwind site to start using the classes.

Step 4

Tailwind by adding all utilities adds too much of size onto your project, especially when you might not be using half of it. This is where the magic with PurgeCSS comes into picture.

Adding purge css as a postcss plugin helps us get rid of styles that we are not using on our project, essentially purging them.

npm i @fullhuman/postcss-purgecss --save-dev

# OR

yarn add @fullhuman/postcss-purgecss --dev

To add to your preact.config.js:

module.exports = (config, env, helpers, params = defaultParams) => {
  const purgecss = require('@fullhuman/postcss-purgecss')({
    // Specify the paths to all of the template files in your project
    content: ['./src/**/*.js'],

    // Include any special characters you're using in this regular expression
    defaultExtractor: content => content.match(params.regex) || [],
  });

  const postCssLoaders = helpers.getLoadersByName(config, 'postcss-loader');
  postCssLoaders.forEach(({ loader }) => {
    const plugins = loader.options.plugins;

    // Add tailwind css at the top.
    plugins.unshift(require('tailwindcss'));

    // Add PurgeCSS only in production.
    if (env.production) {
      plugins.push(purgecss);
    }
  });
  return config;
};

PurgeCSS plugin code and explanation is provided on the docs for Tailwind.

And we are done. 🥳

Wait.. What if you can skip all the steps and use a plugin instead?

npm i preact-cli-tailwind --save-dev

# OR

yarn add preact-cli-tailwind --dev

In your preact.config.js:

const tailwind = require('preact-cli-tailwind');

module.exports = (config, env, helpers) => {
  config = tailwind(config, env, helpers);
  return config;
};

You can find the docs and plugin on Github.

Cross posted posted on my blog

Comments

[piotrostr]

The above configuration no longer works, in postCssLoaders.forEach it has to be

const plugins = loader.options.postcssOptions.plugins

Not including the .postcssOptions raises an exception of Cannot read properties of undefined (reading 'unshift')

[Damian Rivas]

This was wonderful, thank you! And thanks for the plugin :)

[Tech Tim (@TechTim42)]

any example of how to use it.

I did the same thing, but it is like the CSS is not loaded correctly.

p.s.

I figured it out, I forgot to import the tailwind ^_^

[Rishabh Rathod 🤺]

It seems to have an issue.. didn't work for me. github.com/agneym/preact-cli-tailw...

[Agney Menon]

Addressed in this issue

[Umar Abdullahi]

How can this be integrated to the preact typescript project template please

[copperfox777]

Very good description. Can you share a github project ?

[Silence717]

github.com/silence717/preact-types...
hope to help u