TailwindCSS not working in TypeScript even I already imported

Question

main.tsx

import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import { BrowserRouter } from 'react-router-dom'

ReactDOM.createRoot(document.getElementById('root')!).render(
    <BrowserRouter>
      <App />
    </BrowserRouter>
)

index.css

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

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        gray900: "#191C1F",
        gray800: "#303639",
        gray700: "#475156",
        gray600: "#5F6C72",
        gray500: "#77878F",
        gray400: "#929FA5",
        gray300: "#ADB7BC",
        gray100: "#E4E7E9",
        gray0: "#fff",
        warning500: "#EBC80C",
        warning400: "#EFD33D",
        warning300: "#f3de6d",
        secondary700: "#1B6392",
        secondary600: "#2484C2",
        secondary500: "#2DA5F3",
        primary500: "#FA8232",
        warning200: "#F7E99E",
        primary100: "#FFE7D6",
        danger600: "#BE4646",
      },
      boxShadow: {
        boxShadow: "0px 1px 0px 0px #303639",
        loginShadow: "0px 8px 40px 0px rgba(0, 0, 0, 0.12)",
      },
      // colors: {
      //   border: "hsl(var(--border))",
      //   input: "hsl(var(--input))",
      //   ring: "hsl(var(--ring))",
      //   background: "hsl(var(--background))",
      //   foreground: "hsl(var(--foreground))",
      //   primary: {
      //     DEFAULT: "hsl(var(--primary))",
      //     foreground: "hsl(var(--primary-foreground))",
      //   },
      //   secondary: {
      //     DEFAULT: "hsl(var(--secondary))",
      //     foreground: "hsl(var(--secondary-foreground))",
      //   },
      //   destructive: {
      //     DEFAULT: "hsl(var(--destructive))",
      //     foreground: "hsl(var(--destructive-foreground))",
      //   },
      //   muted: {
      //     DEFAULT: "hsl(var(--muted))",
      //     foreground: "hsl(var(--muted-foreground))",
      //   },
      //   accent: {
      //     DEFAULT: "hsl(var(--accent))",
      //     foreground: "hsl(var(--accent-foreground))",
      //   },
      //   popover: {
      //     DEFAULT: "hsl(var(--popover))",
      //     foreground: "hsl(var(--popover-foreground))",
      //   },
      //   card: {
      //     DEFAULT: "hsl(var(--card))",
      //     foreground: "hsl(var(--card-foreground))",
      //   },
      // },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
};

I had already installed tailwind CSS in the app and put tsx from the settings but even I imported it still does not work with any classes. I checked clearly that I already imported the required classes so I got stuck. May I ask how to change the settings to have the app working with the classes in tailwind CSS?

Answer 1

I am not sure which version your react app is. BTW, try to modify tailwind.config.js like this:

module.exports = {
  ...
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "./index.html"(or "./public/index.html")
  ],
  ...
}

Answer 2

module.exports = {
  
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "./*.{ts,tsx}", // Include the main.tsx file
  ],
 
};

By adding "./main.ts" to the content array, you're instructing Tailwind CSS to include the main.ts file in its analysis for used classes. This ensures that Tailwind CSS will apply styles correctly even if Tailwind classes are used in the main.ts file.