Question 275432 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Tailwindcss not being enabled

I created a react project and ran it to test. But it looks like tailwindcss is not enabled. I’m not able to style elements.

App.jsx

const App = () => {
   return (
    <div className="App">
      <h1 className="text-3xl underline">
        Hello world!
      </h1>
    </div>
  )
}

export default App

tailwind.config.jsx

/** @type {import('tailwindcss').Config} */
import { vitePluginTailwindcss } from 'vite-plugin-tailwindcss';
module.exports = {
  mode: 'jit',
  purge: [
    './public/**/*.html',
    './src/**/*.{js,jsx,ts,tsx,vue}',
  ], 
  theme: {
    extend: {},
  },
  plugins: [vitePluginTailwindcss],
}

I added mode:jit and plugin to try and fix, but not fixed. There are no errors

Tags:

3

Answers


  1. 0

    try to change the tailwind.config.jsx file to:

    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,ts}", "./node_modules/flowbite/**/*.js"],
  theme: {
    extend: {},
  },
  plugins: [],
};
    Login or Signup to reply.
  2. 0

    Make sure that you have added the postcss.config.cjs file to the project.

    and add

    module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
    Login or Signup to reply.
  3. 0

    The same question has been asked previously on StackOverflow. You can refer to that question for more information. Tailwind class is not working after installed

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search