Using Tailwindcss

[lvillacin]

Anyone tried using TailwindCss with this boilerplate? If you have, can you provide some guidance on how to implement this? Thank. you very much!

[wprk]

I just got this working in my own project so wanted to share how I did it. PR #32 helped .It's not far off what the docs here tell you: https://tailwindcss.com/docs/installation

First off run the following command to install tailwindcss, postcss, postcss-loader and autoprefixer;

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest postcss-loader@latest

Then add the following file named postcss.config.js in your project root:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Run the following to generate your tailwind config file:

npx tailwindcss init

Then create a tailwind.css file somewhere in your project and link to it from whatever pages you want to use it. I put it here assets/styles/tailwind.css and then references it from the index.jsx of the pages I wanted to use it on (See below).

// src/assets/styles/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;

// src/pages/Options/index.jsx
import React from 'react';
import { render } from 'react-dom';
import '../../assets/styles/tailwind.css';

import Options from './Options';

render(
  <Options title={'settings'} />,
  window.document.querySelector('#app-container')
);

if (module.hot) module.hot.accept();

Then the last step it to tell webpack to load it in your webpack.config.js file. You can see an example in #32 but basically just add the as a loader around line 72

// webpack.config.js
    // rest of loaders above
    {
        loader: 'postcss-loader',
    },

[lucasmrl]

@wprk You saved me a few hours to figure this out, for sure. Thanks!

[sidwebworks]

@wprk Thanks mate this helped me bunch

[FLasH3r]

@wprk had to install postcss-loader@latest too, thanks for the guide!

[beqramo]

Hi, what about purging css? as I see it isn't purging and I don't get the reason

[Getitdan]

@wprk Thank for your useful code!

I had to add the following content array into tailwind.config.js to get it working:

module.exports = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx}',
    './src/containers/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

[dexcell]

@Getitdan i didn't manage it to work with tailwind 3, mind to share the solution? Thanks

ERROR in ./src/assets/styles/tailwind.css (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/postcss-loader/dist/cjs.js!./src/assets/styles/tailwind.css)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Function rgb is missing argument $green.
        on line 466 of src/assets/styles/tailwind.css
>>   color: rgb(220 38 38 / var(--tw-text-opacity));

   ---------^

SassError: SassError: Function rgb is missing argument $green.

Edit: Fixed by adding postcss-loader before sass loader.

rules: [
      {
        // look for .css or .scss files
        test: /\.(css|scss)$/,
        // in the `src` directory
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'postcss-loader',
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },

[J-Filip]

I recommend adding Purge CSS for removing unused classes. This is my postcss.config.js file:

const tailwindcss = require('tailwindcss');
const postcssPresetEnv = require('postcss-preset-env');
const purgecss = require('@fullhuman/postcss-purgecss');

module.exports = {
  plugins: [
    postcssPresetEnv(),
    tailwindcss('./tailwind.config.js'),

    // I suggest turning it off in development mode.
    purgecss({
      content: ['./src/*.html', './src/*.jsx', './src/*.js'],
    }),
  ],
};

[KrishEnacton]

@wprk Can we use tailwind css in content script using post css?