Tailwind CSS does not work with react app - no affect

Question

I am trying to create a react website using npx create-react-app myapp cd my app later i followed the steps as per mentioned on tailwind css that are as followed: npm install -D tailwindcss postcss autoprefixer and then npx tailwindcss init -p followed by this i added the following statement to tailwindconfig:

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

later added the following to index .css

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

my app.js looked like following:

import './index.css'

function App() {
  return (
    <div className="App">
      <h1 className='text-orange-500' >Navbar</h1>
    </div>
  );
}

export default App;

still the tailwind is not taking any affect please help folder structure is as followed;

the browser displays as it is

I assume you are using the latest versions of everything? Did you encounter any errors while installing packages? Have you restarted the dev server? If you reference other CSS inside index.css does it work? — David Rubin
– David Rubin, Commented Jul 8, 2022 at 19:25
What does your rendered source look like? What does your browser dev tools tell you? — mxmissile
– mxmissile, Commented Jul 8, 2022 at 19:30

Syed Laeeq Ahmed · Accepted Answer · 2022-07-08 20:39:36Z

1

I have found the issue the issue was in tailwind config and along with that i deleted the postcss file. The new tailwind config:

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    screens: {
      sm: '640px',
      // => @media (min-width: 640px) { ... }

      md: '768px',
      // => @media (min-width: 768px) { ... }

      lg: '1024px',
      // => @media (min-width: 1024px) { ... }

      xl: '1280px',
      // => @media (min-width: 1280px) { ... }

      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }
    },
  },
  plugins: [],
};

this worked for me still i am confused over the fact why it happened but anyways its working now

answered Jul 8, 2022 at 20:39

Syed Laeeq Ahmed

491 silver badge10 bronze badges

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

Comments

Bhavesh Daswani · Accepted Answer · 2022-07-08 19:28:05Z

0

You might be having issue with tailwind.config.js can you try the below tailwind.config.js, In Create React App, the components are stored in src directory and you are targeting specific to pages and components directory, so going with .src/pages//, .src/pages/, .src/components//, .src/components/, may work you, Give it a try.

    module.exports = {
      content: [
        ".src/pages/**/*.{js,ts,jsx,tsx}",
        ".src/components/**/*.{js,ts,jsx,tsx}",
".src/components/*.{js,ts,jsx,tsx}",
".src/pages/*.{js,ts,jsx,tsx}",
      ],
      theme: {
        extend: {},
      },
      plugins: [],
    }

answered Jul 8, 2022 at 19:28

Bhavesh Daswani

7416 silver badges11 bronze badges

1 Comment

Syed Laeeq Ahmed Over a year ago

no still doesnt work

Jay Patel · Accepted Answer · 2024-06-15 02:41:52Z

0

Create a .postcssrc file in your project root

answered Jun 15, 2024 at 2:41

Jay Patel

1

Collectives™ on Stack Overflow

Tailwind CSS does not work with react app - no affect

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related