Tailwindcss in webpack configuration not getting applied

In developping an outlook add-in.

I would add tailwind to it, here's the tuto that I'm following

In package.json I get these scripts

"scripts": {
    "build": "webpack --mode production",
    "build:dev": "webpack --mode development",
    "dev-server": "webpack serve --mode development",
     ...
  },

then in webpack.config.js

const config = {
    devtool: "source-map",
    entry: {
      polyfill: ["core-js/stable", "regenerator-runtime/runtime"],
      vendor: ["react", "react-dom", "core-js", "@fluentui/react"],
      taskpane: ["react-hot-loader/patch", "./src/taskpane/index.tsx", "./src/taskpane/taskpane.html"],
      commands: "./src/commands/commands.ts",
    },
    output: {
      clean: true,
    },
    resolve: {
      extensions: [".ts", ".tsx", ".html", ".js"],
    },
    module: {
      rules: [
        {
          test: /\.css$/i,
          include: '/src',
          use: ['style-loader', 'css-loader', 'postcss-loader'],
        },
        {
          test: /\.ts$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-typescript"],
            },
          },
        },
        {
          test: /\.tsx?$/,
          exclude: /node_modules/,
          use: ["react-hot-loader/webpack", "ts-loader"],
        },
        {
          test: /\.html$/,
          exclude: /node_modules/,
          use: "html-loader",
        },
        {
          test: /\.(png|jpg|jpeg|gif|ico)$/,
          type: "asset/resource",
          generator: {
            filename: "assets/[name][ext][query]",
          },
        },
      ],
    },
    plugins: [
      ...
      }),
      new HtmlWebpackPlugin({
        filename: "taskpane.html",
        template: "./src/taskpane/taskpane.html",
        chunks: ["taskpane", "vendor", "polyfills"],
      }),
      new HtmlWebpackPlugin({
        filename: "commands.html",
        template: "./src/commands/commands.html",
        chunks: ["commands"],
      }),
      new webpack.ProvidePlugin({
        Promise: ["es6-promise", "Promise"],
      }),
    ],
    devServer: {
      hot: true,
      headers: {
        "Access-Control-Allow-Origin": "*",
      },
      server: {
        type: "https",
        options: env.WEBPACK_BUILD || options.https !== undefined ? options.https : await getHttpsOptions(),
      },
      port: process.env.npm_package_config_dev_server_port || 3000,
    },
  };

In postcss.config.js:

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

and finally the tailwind.config.js

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: ['./dist/*.html'],
    theme: {
    extend: {},
  },
  plugins: [],
};

When I try to apply a tailwind css class nothing is happening , and also when I check in devTools if tailwind css colors tokens are imported for exemple I don't see anything.

I import tailwind components in index.css

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

Then webpack generates me these imports in taskpane.html

<link href="bd3fc3e614edb4896e6a.css" rel="stylesheet" />
<script defer="defer" src="vendor.js"></script>
<script defer="defer" src="taskpane.js"></script>

When I run my app using npm run dev-server I don't see the classes get applied to html.

I think that tailwind is not importing them in css file

Here's my project folders configuration :

Don't hesitate if you want to see other files contents.

In tailwind.config.js, the content should point the paths from src folder.

That's because, as stated in the official docs, Tailwind CSS works by scanning all source files (HTML files, JavaScript components, and any other templates) for class names, generating the corresponding styles and then writing them to a static CSS file.

Webpack builds, in a single process, both styles and JS files, and then it writes these files in the dist folder. Pointing to the dist folder in tailwind.config.js won't work because, at build time, the dist folder is not yet updated.

Assuming that you would use Tailwind classes in React files (ts, tsx), but also in html files, the followind config should work:

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: ["./src/**/*.{ts,tsx,html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

And index.tsx should be:

import React from "react";
import './index.css'; 

Webpack config:

...
module: {
  rules: [
    ...
    {
      test: /\.css$/i,
      include: path.resolve(__dirname, 'src'),
      use: ['style-loader', 'css-loader', 'postcss-loader'],
    },
    ...
  ]
}
...

---

The tutorial that you were following is pointing to the dist folder because it contains the index.html file - which is actually a manually created file and is not part of the build process - it is updated manually.

The tutorial will only work for Tailwind classes that are written in index.html.

Since you are using HtmlWebpackPlugin, with the template option, the source html files are included in the build process and then written in the dist folder.

Actually you can check that - in the setup created following that tutorial and also if not using a plugin that completely cleans the dist folder before the build - when running the build for the second time, Tailwind finds some classes in the files from the previous build and will generate css accordingly - as stated in the this comment.

---

A more comprehensive tutorial is:

https://dev.to/ivadyhabimana/setup-tailwind-css-in-a-react-project-configured-from-scratch-a-step-by-step-guide-2jc8