Tailwind CSS not applying styles

Question

I am currently building a react-express web app and today I ran into many bugs, The first issue was with Webpack-5. I solved it by downgrading the version to 4.0.3 but when I started the react-app, the CSS was not working so I thought it might be an error with Node JS version so I installed the latest version but that caused another bug so I installed the LTS 16.15.1 version but the CSS still did not work. So the next thing I did was reinstall tailwind but that still did not fix it. I don't receive any error messages in the console or in the terminal.

tailwind.config.js

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

postcss.config.js

export const plugins = {
  tailwindcss: {},
  autoprefixer: {},
};

package.json

"devDependencies": {
    "autoprefixer": "^10.4.7",
    "postcss": "^8.4.14",
    "sass": "^1.52.1",
    "tailwindcss": "^3.1.3",
    "typescript": "^4.7.3"
  }

Here is the link to the project if that helps in any way.

The question was originally written for Tailwind CSS v3. Please keep in mind that the new v4 release has more breaking changes, making other questions more relevant now. v4 does not support integration with SCSS or other preprocessors. — rozsazoltan
– rozsazoltan, Commented Jun 25 at 12:58

Afuye Olawale · Accepted Answer · 2022-09-06 13:02:02Z

8

I had the same issue, the solution for me was in the content array in the tailwind.config.json where I specified the path to the folder where I what the styles to get applied

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",  
    "./components/**/*.{js,ts,jsx,tsx}",
    "./page-section/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: "#366B45"
      },

      fontFamily: {
        sans: ["Inter", "sans-serif"],
      },
    },
  },
  plugins: [],
};

answered Sep 6, 2022 at 13:02

Afuye Olawale

3113 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rafael Santos Over a year ago

shouldn't just have content: [ "./src/**/*.{js,tsx,jsx}", ], be sufficient though? As it involves the entire project. I'm still having issues setting this up and can't quite get an answer anywhere

Afuye Olawale Over a year ago

@RafaelSantos nextjs projects dont have a src folder in the root by default

Rohith Nambiar · Accepted Answer · 2022-06-16 14:20:25Z

3

I finally fixed the issue by following this: https://www.smashingmagazine.com/2020/02/tailwindcss-react-project/. But am still not sure why it stopped working suddenly. The only problem with this solution is that on npm start it builds the CSS and outputs it to another file. The problem with that is that I have to restart the server everytime I make a change to the CSS.

answered Jun 16, 2022 at 14:20

Rohith Nambiar

3,7906 gold badges24 silver badges49 bronze badges

Comments

Sarthak Khanduja · Accepted Answer · 2024-08-22 05:26:26Z

Along with the above answers, I've figured that it usually boils down to either the "content" array within your tailwind.config.json, or if you're using something like Vite, it requires you to import tailwindcss within your vite.config.ts file, as following -

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "tailwindcss";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  css: {
    postcss: {
      plugins: [tailwindcss()],
    },
  },
});

tailwind.config.ts -

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
  theme: { ... }
}

Note - The '...' within "theme" above just means your usual things within the rest of the object, my only aim is to bring your attention to the "content" array here.

MagnusEffect · Accepted Answer · 2022-06-15 22:16:23Z

0

Try to add the following in the index.css file

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

answered Jun 15, 2022 at 22:16

MagnusEffect

3,9954 gold badges28 silver badges63 bronze badges

3 Comments

Rohith Nambiar Over a year ago

I had already done that, but it did not work

MagnusEffect Over a year ago

Try to restart the server

Rohith Nambiar Over a year ago

That’s the first thing I did but did not work

Naveen Kamath · Accepted Answer · 2024-04-12 14:19:58Z

0

If you are building React Web app via Parcel, then make sure to include your index.html, index.css files inside your src folder.

For more info Follow this site: https://tailwindcss.com/docs/guides/parcel

answered Apr 12, 2024 at 14:19

Naveen Kamath

671 silver badge6 bronze badges

Collectives™ on Stack Overflow

Tailwind CSS not applying styles

5 Answers 5

2 Comments

Comments

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related