How to config Tailwind CSS with Webpack in Aurelia CLI project?

Help Requests
1

Can anyone help me to configure Tailwind CSS and Purgecss in Webpack of an Aurelia CLI based project?

I config some rules as you see the following picture but does not work.

image
image.png829×707 41 KB

image
Untitled.png1163×454 22.2 KB

1 Like
2

Tailwindcss config looks good. I have tried the same config and it’s working for me.

1 Like
3

Did you check my configs? (Above pictures)

1 Like
4

Yes, I did. I assume that you have no errors during build process. So that you have tailwindcss installed with npm install tailwindcss --save-dev and your styles.css file is in your src folder.
I created new app with Aurelia CLI. I have the same config in webpack.config.js. I have the same styles.css file and require in my app.html. And after au run --watch everything is working as expected.

2 Likes
6

So strange, Yes, My configs works! I tested it again!

@appmark
May I ask you to check my Aurelia with Tailwind CSS repository?
I added PurgeCSS to the webpack.config.js but does not affect the final result.

1 Like
7

I just followed https://tailwindcss.com/docs/controlling-file-size and configured purgecss as postcss plugin.

npm install @fullhuman/postcss-purgecss

Config purgecss in webpack.config.js:

const purgecss = require('@fullhuman/postcss-purgecss')({
  // Specify the paths to all of the template files in your project 
  content: [
    srcDir+'/**/*.html'
    // etc.
  ],
  // Include any special characters you're using in this regular expression
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
});

const cssRules = (production) => [
  { loader: 'css-loader' },
  {
    loader: 'postcss-loader',
    options: { plugins: () => [
      tailwindcss('./tailwind-config.js'),
      require('autoprefixer')(),
      ...when(production, purgecss),
      ...when(production, require('cssnano')())
    ] }
  }
];

You need to pass production parameter to cssRules in case you want to enable purgecss in production build only. You have to pass this parameter in module.exports block.

...
      {
        test: /\.css$/i,
        issuer: [{ not: [{ test: /\.html$/i }] }],
        use: extractCss ? [{
          loader: MiniCssExtractPlugin.loader
        },
        'css-loader'
        ] : ['style-loader', ...cssRules(production)]
      },
      {
        test: /\.css$/i,
        issuer: [{ test: /\.html$/i }],
        // CSS required in templates cannot be extracted safely
        // because Aurelia would try to require it again in runtime
        use: cssRules(production)
      },
...

In your repo, you use purgecss directly as webpack plugin. If you want to do so, I think you also need extract-text-webpack-plugin (https://www.purgecss.com/with-webpack), haven’t tried it.

2 Likes
8

@appmark
Thank you so much.
Based on this post and your guidance I wrote a medium article.

4 Likes