Configuring Preact CLI with Tailwind CSS
Tags: preact, preactcli, tailwindcss
Published: 2019-11-24 14:30:29

[Tailwind CSS](https://tailwindcss.com/) 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](https://postcss.org/) to include these class names and styles into the project.

> Skip to the end if you just want to [use a plugin](https://dev.to/boywithsilverwings/configuring-preact-cli-with-tailwind-css-3ckj#wait-what-if-you-can-skip-all-the-steps-and-use-a-plugin-instead)

Here, we will look at how to go about this configuration on a project generated with [Preact CLI](https://github.com/preactjs/preact-cli).

## Step 1

Setup Preact CLI project

```bash
npx preact-cli create default my-project
```

## Step 2

Installing Tailwind CSS.

```bash
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`](https://github.com/preactjs/preact-cli/blob/master/docs/webpack-helpers.md#getloadersbyname) to access all instances of PostCSS loader in the configuration.

```js
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](https://tailwindcss.com/docs/installation/) 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](https://www.purgecss.com/) 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`:

```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](https://tailwindcss.com/docs/controlling-file-size).

> And we are done. 🥳

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

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

# OR

yarn add preact-cli-tailwind --dev
```

In your preact.config.js:

```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](https://github.com/agneym/preact-cli-tailwind).

> Cross posted posted on my [blog](https://blog.agney.dev/preact-cli-with-typescript/)