reactjstailwind-csstailwind-css-3

React UI doesn't render with Tailwind v3?

Having trouble even understanding why my React app isn't rending properly. I'm guessing it is TailwindCSS/PostCSS screwing up. When running or building it, I don't get specific errors for this UI issue.

Do I need both tailwind.config.js and tailwind.config.ts?

global.css

@import "tailwindcss";

body {
  font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {

}

tailwind.config.js

@type {import('tailwindcss').Config}

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
  ],
}
Solution

  • Make sure the required packages for v3 are installed. Running the init command is not necessary if you have already created the postcss.config.js and tailwind.config.js files. But running it again won't hurt; it will simply fill in any missing configurations.

    npm uninstall @tailwindcss/postcss
npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p

    In the global.css file, you need to import TailwindCSS like this:

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

body {
  font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {

}

    And you need to extend your tailwind.config.js like this:

    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

    You don't need both tailwind.config.js and tailwind.config.ts, just one of them.

    Prevent the @tailwind directive from showing a warning

    Install the official TailwindCSS extension in VSCode:

    After that, tell VSCode that you want to treat your .css files as TailwindCSS. You can do this in the settings under files.associations like this:

    {
  "files.associations": {
    "*.css": "tailwindcss",
    "*.scss": "tailwindcss",
  },
}