Hello, this is my first time working with React and I'm running into some issues.

I created a CSS file but it is not applying the styles when I use className or id. However it is applying the style when I use only

the html elements (i.e. h1, input, ul, etc).

I saved the css file in the src folder and wrote the import statement so I am very confused as to what's going on.

Please let me know if further information is needed and thank you in advance!

i'm having a frustrating issue with Tailwind CSS in my Create React App project. The Tailwind classes are showing up in the HTML elements when I inspect them in DevTools, but absolutely no styles are being applied - everything just appears as plain black lines/text and on top of each other one line after another.

PS: for context i am a developper but this is my first project with react.js so i've been vibe coding my way through it , learning as i go everything i implement .

Setup:

• React 19.1.1 with TypeScript

• Create React App (react-scripts 5.0.1)

• Tailwind CSS 3.4.17

• CRACO 7.x for PostCSS support

• Tested in both Chrome and Firefox - same issue

Configuration files:

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

craco.config.js:

module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

src/index.css:

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

/* rest of CSS... */

package.json

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
}

Test Component:

const TestComponent = () => {
  return (
    <div className="p-8 bg-red-500 text-white">
      <h1 className="text-2xl font-bold mb-4">Tailwind CSS Test</h1>
      <p className="text-lg">If you can see red background and white text with proper padding, Tailwind is working!</p>
      <div className="mt-4 p-4 bg-blue-500 rounded-lg">
        <p>This should be blue with rounded corners and padding</p>
      </div>
    </div>
  );
};

What I've tried:

1. Installed CRACO and configured it properly

2. Updated package.json scripts to use CRACO instead of react-scripts

3. Verified Tailwind config content path includes all React files

4. Confirmed u/tailwind directives are in index.css

5. Development server compiles without errors

6. Cleared browser cache and hard refreshed

The weird part: When I inspect the elements in DevTools, I can see the Tailwind classes are applied to the HTML elements (like class="p-8 bg-red-500 text-white"), but there are no actual CSS styles - no background colors, no padding, nothing. It's like the CSS isn't being generated or loaded.

Environment:

• Windows 11

• Node.js version: 24.2.0.0

• npm version: 11.3.0

Has anyone encountered this before? What am I missing in my setup? The fact that the classes appear in the HTML but have no styling suggests the PostCSS processing isn't working correctly, but CRACO should handle that.

Any help would be greatly appreciated!

i am facing issue when i am trying to scope css file to specific component in case of class component its working fine by following this article https://create-react-app.dev/docs/adding-a-css-modules-stylesheet

but in functional component this approach is not working

here is some my application details
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-scripts": "3.4.0"

here is my component
import React, { Component } from 'react';
import LS from './Layout.module.css';
// import './Layout.css'
import Aux from '../../hoc/Aux';

// const layout = (props) => (
//
// Toolbar Sidebar BackDrop
//
// {props.children}
//
//
// );

class layout extends Component {
render() {
return (

Toolbar Sidebar BackDrop

{this.children}

);
}
}
export default layout;

when i apply class approach the css is only scope to the layout file but i want to use finctional component but the scope css is not working when i use functional component

app.jsx:

// src/app.jsx
export default function App() {
return (
<h1 className="text-sm font-bold underline bg-blue-500">
Hello world!
</h1>
)
}

main.jsx:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

index.css:

@import "tailwindcss";


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

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
})

vite.config.js:

Please help as i cannot move forward with development. I tried scourging on the internet. Some say running git init command helps, but it didnt work for me

I have been using CRA for my project and for some reason it will not build (or deploy to heroku) when my css file is in any folder other than public. I have googled all over the internet and the only similar question had a problem solved by their own error in css. I have linted the css file and have found only warnings.

This is my current file structure

In index.js inside my src folder I have:

import React from 'react';
import ReactDOM from 'react-dom';
import './components/index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

And in every component file I have an import statement for the CSS.

I have tried moving the css file inside the src folder and changing the paths, but the only place it will successfully build is when it's inside the public folder with index.html and I link to the file.

I keep getting the error:

 ./src/index.css
Module build failed: ModuleBuildError: Module build failed: TypeError: Cannot read property 'length' of undefined
at Array.forEach (<anonymous>)
    at <anonymous>

EDIT: I'm constantly doing trial and error to find the issue and it seems like it really is something that webpack may not be able to process in my css file. If I comment out the homepage.css file, it will build and work. I am currently trying to find the property that it cannot read. Anyone know if it's a css grid thing that it can't compile or if there is a list of properties that webpack can't compile?

EDIT 2: Ok guys I've spent like maybe 5 hours on this (including time from last night) and I finally find the problem. It seems that cra doesn't like me making my code cleaner and copying a banner gradient from Wes Bos' tutorial.

  background: linear-gradient(to var(--direction, left), var(--yellow), transparent);

This was the issue. The var(--direction, left) does not work with the css-compiler (i'm guessing) in cra. This code was used to make THIS type of banner and to make less code. It works in my local dev on Chrome and Firefox, but I guess it's a no-no for cra. Hope this may help anyone in the future!

Hi guys. My tailwind styling is not being applied for some reason I cant figure out. I created a react project using vite then I noticed something was wrong when I tried to install tailwind, I had to use the -- legacy peps method to force install it, then when I wanted to add the postcss.config.js and tailwind.config.js files using the "npx tailwindcss init -p" command it would give me this error even though I installed tailwind. I tried manually creating the files but my styles are still not being applied. please help me out? Here is the Github-link for the project.

$ npx tailwindcss init -p
npm error could not determine executable to run
npm error A complete log of this run can be found in: C:\Users\User\AppData\Local\npm-cache\_logs\2025-03-06T08_29_47_315Z-debug-0.log

FIXED! It was a semicolon at the end of another css file which was breaking everything. Just in case this helps someone else, if your css is not working well when deploying to netlify check those pesky semicolons in your css files!

I have a react app deployed to netlify and it's not picking up the css from one specific file while when in localhost it does work. I've checked the sources with the devTools and in the css main chunk I can see the css properties , specifically these:

.slick-slide>div{display:flex!important;justify-content:center!important}

I don't understand why it will work in localhost but not when deployed, anyone has any ideas ?

ps: I forgot to say that I'm using material-ui for mostly everything but this particular file is a separate css file I had to add to target something related to a slick-corousel I'm using. Maybe this could have something to do with the incidence? Although what's weird is that it works locally.

I’ve been building stuff in React for a couple of years now. Started as a complete web dev newbie and now I can comfortably code an app by myself. I understand React rendering and state pretty well now. But one area I feel I still don’t understand is CSS.

I never quite understood CSS. When I started, I was mostly working on small parts within a design system so most styling questions were answered for me. Then I moved to tailwind, which again has a lot of styles already in place.

I was doing pretty well with tailwind, but the first roadblock I hit was when I tried building a component library using tailwind. For the first time ever, my app’s styles and my libraries styles started clashing, and I started noticing weird styling issues I’d never seen in the past.

So I finally decided to bite the bullet and learn styling from the basics. I began researching various styling solutions in React that can and was bombarded with various libraries and CSS pre-processors - CSS-in-JS, SASS, css modules, etc.

Sorry for the long post, but my questions are - which of these are most people using and why? What’re the benefits of one over another? And finally which ones work best for styling large component libraries?

Edit: thanks for the suggestions everyone! Just to be clear I do understand the basics of HTML and CSS. I’ve built fairly complex components by myself (ex: https://rowstack.io). But the basics aren’t always enough when building a design system. Thats the part that is a bit intimidating.

I feel I am very fluent in React and using MUI as my UI framework yet i struggle alot when writing css.

Is it "normal" to struggle with css when you are alot better in writing components, algorithms,
defining architecture, doing object/array manipulation etc.? If so - how do i get better at css?

I'm trying to setup tailwind 4.1.8 in my Vite app. I followed the docs in https://tailwindcss.com/docs/installation/using-vite . It does not want to apply styles no matter what I do. Here's my config files and the styles I am trying to apply:

I first tried inside App.jsx but then went to straight to main.jsx with same results

I'm currently using **Vite (6.3.3)** + **React** with **Tailwind CSS (v4.1.4)** on an Ubuntu Linux machine. My environment appears to be set up correctly according to the latest docs (as of April 2025). The build completes without errors, and the dev server (`npm run dev`) runs without issues. Tailwind compiles, but my styles are not being applied at all.

**Specifically:**

- The `vite.config.js` is standard:
```js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
});
```

- `postcss.config.js` is:
```js
export default {
  plugins: {
    '@tailwindcss/postcss': {},
    autoprefixer: {},
  },
};
```

- `tailwind.config.js` is:
```js
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,jsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

- `src/index.css` correctly imports Tailwind:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

- In `src/main.jsx`, I'm importing `index.css` explicitly:
```jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);
```

- My `App.jsx` component:
```jsx
export default function App() {
  return (
    <div className="flex items-center justify-center h-screen bg-blue-600 text-white">
      <h1 className="text-3xl font-bold">
        Tailwind is working!
      </h1>
    </div>
  );
}
```

**Issue:**  
When loading the page (`localhost:5173`), it simply displays the text without Tailwind's styling. Developer tools console shows no errors or warnings. Tailwind clearly compiles but doesn't style the output.

**Additional context:**  
- Ubuntu Linux environment (permissions are fine)
- Incognito browser session for testing
- No caching issues

This feels like something subtle but critical. Has anyone encountered this with recent Tailwind + Vite + React setups (April 2025)? Appreciate any insights, as I'm currently stuck after verifying and double-checking every configuration file.

I am very new to all of this and have spent days trying to figure this out. Any help would be greatly appreciated.

I'm currently using **Vite (6.3.3)** + **React** with **Tailwind CSS (v4.1.4)** on an Ubuntu Linux machine. My environment appears to be set up correctly according to the latest docs (as of April 2025). The build completes without errors, and the dev server (`npm run dev`) runs without issues. Tailwind compiles, but my styles are not being applied at all.

**Specifically:**

- The `vite.config.js` is standard:
```js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
});
```

- `postcss.config.js` is:
```js
export default {
  plugins: {
    '@tailwindcss/postcss': {},
    autoprefixer: {},
  },
};
```

- `tailwind.config.js` is:
```js
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,jsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

- `src/index.css` correctly imports Tailwind:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

- In `src/main.jsx`, I'm importing `index.css` explicitly:
```jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);
```

- My `App.jsx` component:
```jsx
export default function App() {
  return (
    <div className="flex items-center justify-center h-screen bg-blue-600 text-white">
      <h1 className="text-3xl font-bold">
        Tailwind is working!
      </h1>
    </div>
  );
}
```

**Issue:**  
When loading the page (`localhost:5173`), it simply displays the text without Tailwind's styling. Developer tools console shows no errors or warnings. Tailwind clearly compiles but doesn't style the output.

**Additional context:**  
- Ubuntu Linux environment (permissions are fine)
- Incognito browser session for testing
- No caching issues

This feels like something subtle but critical. Has anyone encountered this with recent Tailwind + Vite + React setups (April 2025)? Appreciate any insights, as I'm currently stuck after verifying and double-checking every configuration file.