Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using Tailwindcss #39

Open
lvillacin opened this issue Apr 20, 2021 · 9 comments
Open

Using Tailwindcss #39

lvillacin opened this issue Apr 20, 2021 · 9 comments

Comments

@lvillacin
Copy link

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
Copy link

wprk commented May 18, 2021

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',
    },

@za01br
Copy link

za01br commented Jun 17, 2021

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

@sidwebworks
Copy link

@wprk Thanks mate this helped me bunch

@FLasH3r
Copy link

FLasH3r commented Nov 6, 2021

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

@beqramo
Copy link

beqramo commented Mar 11, 2022

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

@Getitdan
Copy link

@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
Copy link

dexcell commented Mar 16, 2022

@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
Copy link

J-Filip commented Aug 19, 2022

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

10 participants