Tailwind CSS classes not working in Vanilla or React project

avatar
Borislav Hadzhiev

Last updated: May 21, 2023
6 min

banner

# Table of Contents

  1. Tailwind CSS classes not working
  2. Correctly configuring a vanilla HTML/CSS Tailwind project
  3. Configuring Tailwind with Create-React-App

# Tailwind CSS classes not working [Solutions]

There are multiple reasons why your tailwind CSS classes might not be working.

  1. Try to swap the @tailwind directive to @import in your .css file.

Replace the following:

src/input.css
@tailwind base; @tailwind components; @tailwind utilities;

With the following

src/input.css
@import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities';

Try to restart your tailwind build server and your development server after making the change.

  1. Make sure the content array in your tailwind.config.js file is configured correctly.
The content array of your tailwind.config.js file is where you configure the paths to all your HTML templates, JavaScript components and any other source files that contain Tailwind class names.

Make sure that the paths to all your source files in which you use Tailwind CSS classes are covered in the patterns specified in the content array.

The following example looks for html and js files in a pages/ and components/ directories.

tailwind.config.js
module.exports = { content: [ './pages/**/*.{html,js}', './components/**/*.{html,js}', ], // ... rest of your config }

You might also have to add different extensions or paths if you use React.js or Vue.js.

tailwind.config.js
module.exports = { content: [ './pages/**/*.{html,js,jsx,ts,tsx}', './components/**/*.{html,js,jsx,ts,tsx}', ], // ... rest of your config }

The example above added the jsx, ts and tsx extensions.

The specified paths are configured as glob patterns, where:

  • An * is used to match anything except slashes and hidden files.
  • Two asterisks ** are used to match zero or more directories.
  • A comma is used to separate values between curly braces {} to match against a list of options (e.g. multiple extensions).

Note that the paths are relative to your project root (where your package.json file is) and not to your tailwind.config.js file.

In most cases, your tailwind.config.js file should also be at the root of your project, but if you've specified a custom location, the paths in your content array are relative to the root of the project and not to tailwind.config.js.

Tailwind will only process the files that are specified in your content array.

  1. Make sure you have run your build command.

The command below assumes that your main CSS file is at src/input.css and produces your output CSS file at dist/output.css.

shell
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
  1. Make sure that the path to your output CSS file in your index.html file is correct.

For example, suppose that we have the following folder structure.

shell
tailwind-project/ └── dist └── index.html └── output.css └── src └── input.css

The index.html file and the output.css files are located in the same directory, so you have to specify a relative path when loading the output.css file.

dist/index.html
<link href="output.css" rel="stylesheet" />

The link tag above looks for an output.css file that is located in the same directory as your index.html file.

# Correctly configuring a vanilla HTML/CSS Tailwind project

The example below assumes that you use the following folder structure.

shell
tailwind-project/ └── dist/ └── index.html └── output.css └── src/ └── input.css └── tailwind.config.js

tailwind project folder structure

Here is a step-by-step example of how to correctly configure a vanilla HTML/CSS Tailwind project.

  1. Create your project directory, e.g. named tailwind-project.

  2. Open your terminal in your project directory and run the following commands.

shell
# 👇️ create a package.json file npm init -y # 👇️ install tailwindcss npm install -D tailwindcss # 👇️ create your configuration file npx tailwindcss init
  1. Your tailwind.config.js file should be located in the root directory of your project (where your package.json file is).

Add the following code to your tailwind.config.js file.

tailwind.config.js
/** @type {import('tailwindcss').Config} */ module.exports = { content: ['./dist/**/*.{html,js}'], theme: { extend: {}, }, plugins: [], };

Notice that the content array looks for .html or .js files in the dist directory of your project.

  1. Create a src directory in the root of your project and add an input.css file to it.

This is the code for src/input.css.

src/input.css
@import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities';
  1. Start your tailwind CLI build process by running the following command from your terminal.
shell
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
  1. Create an index.html file in your dist directory.

Here is the code for dist/index.html.

dist/index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="output.css" rel="stylesheet" /> </head> <body> <h1 class="text-3xl font-bold underline bg-green-200"> bobbyhadz.com </h1> </body> </html>

Notice that the link tag specifies the path to your output.css file.

dist/index.html
<link href="output.css" rel="stylesheet" />

The index.html and output.css files are both located in the dist/ directory, so we can use a relative path.

Make sure to specify the correct path to your output CSS file otherwise, you won't be able to load it and the tailwind CSS classes won't be available.
  1. Change your terminal to the dist directory.
shell
cd dist
  1. Once your terminal is in the dist directory, start your development server.
shell
npx serve .

If I open my development server, I can see that the tailwind classes have been applied.

tailwind classes work correctly

  1. Make a change to your dist/index.html file.

For example, change the background color of the h1 element to bg-red-200.

dist/index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="../output.css" rel="stylesheet" /> </head> <body> <h1 class="text-3xl font-bold underline bg-red-200"> bobbyhadz.com </h1> </body> </html>

Save the file and switch to your browser.

change applied successfully vanilla tailwind project

Note that the tailwind build command has to always be running in the background. It watches your files and rebuilds your CSS when it changes.

shell
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

To not have to remember the command, it is best to add it as a script to your package.json.

package.json
{ "scripts": { "build-tailwind": "npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch" }, }

Now you can issue the npm run build-tailwind command instead of having to remember the long tailwindcss command.

shell
npm run build-tailwind

If you forget to run your npx tailwindcss (or npm run build-tailwind) command, tailwind won't watch for changes in your dist/index.html and src/index.css files and won't build the output CSS file at dist/output.css.

The example above assumes that you use the following folder structure.

shell
tailwind-project/ └── dist/ └── index.html └── output.css └── src/ └── input.css └── tailwind.config.js

tailwind project folder structure

# Configuring Tailwind with Create-React-App

If you have issues when using tailwind with create-react-app:

  1. Create your React application by running the following command.
shell
npx create-react-app tailwind-react
  1. Change your terminal to your project directory.
shell
cd tailwind-react
  1. Install tailwindcss.
shell
npm install -D tailwindcss
  1. Initialize your tailwind.config.js file.
shell
npx tailwindcss init
  1. Add the following code to your tailwind.config.js file.
tailwind.config.js
/** @type {import('tailwindcss').Config} */ module.exports = { content: ['./src/**/*.{js,jsx,ts,tsx}'], theme: { extend: {}, }, plugins: [], };

The example above assumes that your source files are placed in your src/ directory and have .js, .jsx, .ts or .tsx extensions.

  1. Add the following tailwind directives to your src/index.css file.
src/index.css
@tailwind base; @tailwind components; @tailwind utilities;
  1. Make sure your index.css file is imported into your index.js file.
src/index.js
import './index.css';
  1. Issue the npm run start command from the root of your project.
shell
npm run start
  1. Add the following code to your src/App.js file.
src/App.js
export default function App() { return ( <h1 className="text-3xl font-bold underline bg-red-200"> bobbyhadz.com </h1> ); }
  1. Open your React development server.

If I visit http://localhost:3000, I can see that the tailwind CSS classes are loaded successfully.

tailwind classes applied to react project

  1. Make a change to your src/App.js file to change the background color of the h1 element.
src/App.js
export default function App() { return ( <h1 className="text-3xl font-bold underline bg-green-200"> bobbyhadz.com </h1> ); }

If I save the file and switch to my browser, I can see that the change has been applied and the background color is now green.

tailwind class updated in react

The example assumes that you have the following project structure:

shell
tailwind-react/ └── tailwind.config.js └── src/ └── index.css └── index.js └── App.js

tailwind react folder structure

If you get the warning "Unknown at rule @tailwindcss(unknownAtRules) warning" in your .css file, check out the following article.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.