TailwindCSS is a popular utility-first CSS framework that enables developers to quickly build modern and responsive websites. However, despite its simplicity and ease of use, there are some issues that you may face when working on the first try. Although the TailwindCSS installation guide is clear and concise, here are the five common reasons why TailwindCSS might not be working as expected.
Before starting, please check the complete guide on how to install TailwindCSS in HTML Project.
1. You haven’t Installed TailwindCSS and Its Dependencies Correctly
One of the most common reasons why TailwindCSS may not be working is the absence of its installation and dependencies. Go to your project and make sure that you have correctly installed TailwindCSS and its required dependencies, such as PostCSS and autoprefixer. Without these dependencies, TailwindCSS cannot compile and apply the utility classes to your HTML elements.
Here is the command that you can use to install TailwindCSS and the required dependencies with npm.
|
1 2 3 4 5 |
npm install tailwindcss postcss autoprefixer |
2. Missing TailwindCSS Input File and Directives
Another common reason for TailwindCSS not working is the absence of the input file and necessary directives. TailwindCSS requires an input file where you have to import and configure TailwindCSS. In this file, you should include the following directives in the input file.
|
1 2 3 4 5 6 7 |
@tailwind base; @tailwind components; @tailwind utilities; |
3. Missing TailwindCSS Config File And Content Array
A TailwindCSS configuration file is essential for customizing the framework according to your project’s requirements. If you’re not seeing the expected changes, it is possible that your project doesn’t have a TailwindCSS configuration file. Here is the command to add the TailwindCSS config file.
|
1 2 3 4 5 |
npx tailwindcss init |
The command above will create a tailwind.config.js file in your project’s root directory.
In the TailwindCSS configuration file, there is a content array that specifies which files should be scanned for classes. By default, it may be empty and you need to add your HTML/JSX files that use TailwindCSS classes, ensure that you add them to the content array. Otherwise, the classes used in those files will not be generated in the final CSS file.
Here is an example of adding the content array in tailwind.config.js file.
|
1 2 3 4 5 6 7 8 9 10 11 |
module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], } |
4. You Didn’t Link the TailwindCSS Output file
After TailwindCSS is compiled, it generates a CSS file that contains all the utility classes. To use these classes in your project, make sure to link the output CSS file in your HTML. Include the following link tag within the head section of your HTML file.
|
1 2 3 4 5 |
<link href="path/to/your/generated.css" rel="stylesheet"> |
5. TailwindCSS Watcher Is Not Running
If you are working with a framework like react or vue, this step is not required but with a simple HTML project, you need to run TailwindCSS watcher which will start watching the classes you add. Here is how you can start Watcher to scan your files.
|
1 2 3 4 5 |
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch |
Conclusion
TailwindCSS is a powerful CSS framework that simplifies and accelerates the web development process. However, encountering issues with its implementation is not uncommon. The first step to figuring out why TailwindCSS is not working is to check the installation of TailwindCSS and the required dependencies. After that, ensure you have the input file with TailwindCSS directives and the TailwindCSS config file with the content array. The last step is to check if the output file is linked to your project and if the watcher is scanning your files. If everything described above is correctly implemented, there is no way TailwindCSS is not working.