Configure TailwindCSS in a Chrome Extension using Webpack

[deadcoder0904]

I'm trying to configure Tailwind in a Chrome Extension that uses this boilerplate → https://github.com/sivertschou/react-typescript-chrome-extension-boilerplate/tree/christmas

So far I've installed the following packages:

➜ npm install tailwindcss@latest postcss@latest autoprefixer@latest

On a sidenote: Why do we need postcss & autoprefixer as a dependency, shouldn't it be a dev dependency?

I've also initialized tailwind.config.js using:

➜ npx tailwindcss init

tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

styles/tailwind.css

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

popup.tsx

import './styles/tailwind.css'

Now how do I use PostCSS to bundle these files? I think I'm stuck on https://tailwindcss.com/docs/installation#building-your-css

How do I do it?

[deadcoder0904]

Alright solved it by installing postcss-loader:

➜ npm install --save-dev postcss-loader postcss

Just had to add in webpack.config.js:

{
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
        exclude: /\.module\.css$/,
},

[deadcoder0904]

I think a Webpack Guide should be added in Tailwind docs like the other ones because let's be honest everyone hates Webpack but still uses it.

Would love to know about:

➜ npm install tailwindcss@latest postcss@latest autoprefixer@latest

Why do we need postcss & autoprefixer as a dependency, shouldn't it be a dev dependency?

[deadcoder0904]

Also, would love to know how to add purge for this project as it's not working & generating a huge bundle. Currently, I have:

module.exports = {
  purge: ['./src/**/*.tsx', './src/**/*.ts'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

I tried different variations like src/App.tsx or src/*.tsx or src/popup.js but it isn't working. The dist/popup.js file is huge (~4 MB), not sure how to reduce it?

[deadcoder0904]

Had to add "build": "NODE_ENV=production webpack" to package.json as purge only works when NODE_ENV=production or purge: {enabled: true} 👍