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?
I am not sure which version your react app is. BTW, try to modify tailwind.config.js like this: