TailwindCSS

[fowlercraig]

Hey there, is there any guidance on how to add TailwindCSS to the theme? I've poked around in the webpack config file, but haven't had any luck.

Here are their installation directions: https://tailwindcss.com/docs/installation

[Abdillah]

You'll need to upgrade postcss-loader to 3.x first. After that, adding the tailwind's PostCSS plugin, import the tailwind from sass will works.

[mehdico]

Same problem. also upgraded to postcss-loader 3.0.0 and its not work.

ERROR in ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/src??ref--1-3!./node_modules/sass-loader/lib/loader.js??ref--1-4!./resources/assets/sass/app.scss
Module build failed: 
@import "tailwindcss/base";
^
      File to import not found or unreadable: tailwindcss/base.
      in /Users/mehdi/Programming/web/wordpress/wp-content/themes/khabardar/resources/assets/sass/app.scss (line 78, column 1)
 @ ./resources/assets/sass/app.scss 4:14-207
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

[braydevkin]

The solution I found was as follows.

I noticed that there are different configurations between "create-react-app" and next-app. so first check that you are making the correct configuration.

Configuration for "create-react-app"

https://tailwindcss.com/docs/guides/create-react-app

Configuration for next-app https://tailwindcss.com/docs/guides/nextjs

After configuring as needed, just configure the global file

CSS Config

* ./styles/globals.css * /
@tailwind base;
@tailwind components;
@tailwind utilities;

SASS Config

Sass uses imports

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

You must also make a configuration in the craco

File Name: "craco.config.js"

/ craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [
        require ('tailwindcss'),
        require ('autoprefixer'),
        require ('postcss-import')
      ],
    },
  },
}

If you are using postcss to SASS , just follow the instructions in the documentation.

https://tailwindcss.com/docs/using-with-preprocessors#using-post-css-as-your-preprocessor