How to use Tailwind CSS with pug-plugin

[a-gunderin]

Hello @webdiscus !

I was trying to use Tailwind (https://github.com/tailwindlabs/tailwindcss) with pug-plugin but unfortunately I couldn't get the correct CSS to be generated. Have you ever try to use Tailwind with pug-plugin? Repo to reproduce: https://github.com/a-gunderin/webpack-starter

Regards.

[webdiscus]

Hello @a-gunderin,

thanks for the problem report and you repo. I can reproduce the issue. I have no experience with tailwind css, but I try to find a solution.

Possible you can find a workaround here How to use it with tailwindcss and server side rendering?.

[a-gunderin]

Thanks a lot for so quick response. I was trying to use some approaches and tips from this issue but unfortunately no results =(

[webdiscus]

@a-gunderin,

Tailwindcss works fine!

I found a solution, just one moment, I push it in your repo.

[a-gunderin]

Many thanks for your help! For those who will be looking for a solution to this issue:

tailwind don't works with "type": "module", but in cjs mode works fine!

[webdiscus]

Hi @a-gunderin,

tailwind don't works with "type": "module", but in CommonJS mode works fine! The problem is that in ESM mode, postcss-loader does not run the tailwindcss plugin.

I don't know why.

The solution for everyone who reads it in the future.

Install the packages as dev dependencies:

"css-loader": "^6.7.3",
"postcss": "^8.4.21",
"postcss-loader": "^7.1.0",
"postcss-preset-env": "^8.0.1",
"pug-plugin": "^4.9.7",
"tailwindcss": "^3.2.7",
"webpack": "^5.76.2",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.13.1"

Create the postcss.config.js:

module.exports = {
  plugins: [
    'postcss-preset-env',
    'tailwindcss',
  ],
};

Create the tailwind.config.js:

module.exports = {
  content: [
    './src/**/*.pug', // path to Pug templates
  ],
};

Create the Webpack config webpack.config.js:

const path = require('path');
const PugPlugin = require('pug-plugin');

module.exports = {
  entry: {
    index: './src/index.pug',
  },

  output: {
    path: path.join(__dirname, 'dist'),
  },

  plugins: [
    new PugPlugin({
      js: {
        filename: 'js/[name].[contenthash:8].js',
      },
      css: {
        filename: 'css/[name].[contenthash:8].css',
      },
    }),
  ],

  module: {
    rules: [
      {
        test: /\.pug$/,
        loader: PugPlugin.loader,
      },
      {
        test: /\.css$/,
        use: ['css-loader', 'postcss-loader'], // add postcss-loader
      },
    ],
  },
};

Create the src/style.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Create the Pug template src/index.pug:

doctype html
html
    head
        title Tailwind CSS
        link(href=require('./style.css') rel='stylesheet')
    body.bg-red-500
        h1 Hello World!

Using these configs, Tailwind CSS works fine with pug-plugin!

Here is the working demo repo webpack-tailwind-pug.