Tailwind classes not applied

Question

I've build an app using create-react-app and then installed tailwindcss and postcss. I've followed the config for applying tailwind but my classes still aren't being applied. I have tried specifying the files in the config but it's still picking up:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/App.jsx",
    "./src/*.{js,jsx,html}",
    "./src/**/*.{js,jsx,html}",
    "./src/components/**/*.{js,jsx,html}",
  ],
  theme: {
  },
  plugins: [],
}

this is the index.css:

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

and this is the src/App.jsx where I apply the class:

import React from 'react';

function App() {
  return (
    <div className='App'>
      <div className='flex flex-col'>
        <div className='flex bg-black'>
          <span>How to find us</span>
        </div>
        <div className='flex'>
          <Component />
        </div>
      </div>
    </div>
  );
}

export default App;

I have run npx tailwindcss -i ./src/index.css -o ./dist/output.css and have restarted the server, cleared cache and uninstalled and reinstalled tailwind but it still isn't working. Is there something I have missed?

I usually do an import of the css file as such import './index.css'; in my App.jsx and it usually works fine — Julien Duris
– Julien Duris, Commented Aug 15, 2023 at 9:06
I've tried adding that in and it still won't apply the classes — Nats
– Nats, Commented Aug 15, 2023 at 9:14
Looking at that documentation, it says "Create React App does not support custom PostCSS configurations and is incompatible with many important tools in the PostCSS ecosystem, like postcss-import. We highly recommend using Vite, Parcel, Next.js, or Remix instead of Create React App." Should have mentionned in my comment earlier that I was talking about a NextJS install, not a Create react app one. Never got any problem with tailwindcss + postcss + NextJS — Julien Duris
– Julien Duris, Commented Aug 15, 2023 at 9:51

Emma Ngo · Accepted Answer · 2023-08-15 09:29:16Z

0

Try to check you node_modules the directory of /tailwindcss
Then try to add this line to your src/App.jsx

import 'tailwindcss/tailwind.css';

answered Aug 15, 2023 at 9:29

Emma Ngo

1041 silver badge7 bronze badges

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

2 Comments

Nats Over a year ago

I can see the node_module for tailwindcss and it all looks correct. I've added the import line to the App.jsx file and rebuilt and my problem is still persisting

Emma Ngo Over a year ago

I found an article here bobbyhadz.com/blog/tailwind-class-not-working Try to check dist/index.html link again

Collectives™ on Stack Overflow

Tailwind classes not applied

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related