CODEWITHSUNDEEP
csstailwind-css
Rohith Nambiar
Rohith Nambiar

Reputation: 3720

Tailwind CSS not applying styles

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.

Upvotes: 4

Views: 27786

Answers (5)

Sarthak Khanduja
Sarthak Khanduja

Reputation: 31

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.

Upvotes: 3

Naveen Kamath
Naveen Kamath

Reputation: 57

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

Upvotes: 0

Afuye Olawale
Afuye Olawale

Reputation: 301

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 appliedenter image description here

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: [],
};

Upvotes: 7

Rohith Nambiar
Rohith Nambiar

Reputation: 3720

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.

Upvotes: 3

MagnusEffect
MagnusEffect

Reputation: 3925

Try to add the following in the index.css file

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

Upvotes: 0

Related Questions