How to Add TailwindCSS in Simple HTML Project

TailwindCSS is not only designed for frameworks but can also be used in a simple HTML project. Instead of writing custom CSS, you can get the benefits of TailwindCSS in your static website. Here are 5 simple steps to add TailwindCSS in a simple HTML project and use it.

Pre-requisite to Install TailwindCSS

If you haven’t installed node js, download it from the official website. Make sure you download the LTS version from the site. Node JS comes with NPM which is required to install TailwindCSS CLI and install node modules required for Tailwind to work.

Step 1: Install TailwindCSS CLI and Create Config File

Next, you need to install TailwindCSS CLI globally or as a dev dependency. This CLI will be then used to create a config file and run the TailwindCSS compiler. You can install it as a dev dependency or as a global package in your system.

Now, create a config file (tailwind.config.js) with the following command.

Step 2: Add File Paths to Content Array in Config

After creating a config file add your folder path with file extensions that you want to scan through while working. In this example, only HTML files are used as content so the content array only includes HTML file paths. Check the example below and modify it according to your project structure.

Step 3: Create an Input File with Tailwind Directive

The second step in adding TailwindCSS to an HTML project is to create a .css file input file with 3 basic TailwindCSS directives. Name your file whatever you want and add these @tailwind base @tailwind components @tailwind utilities. In this example, the input file is named tailwind-input.css.

Step 3: Run TailwindCSS Compiler to Watch Changes

After you add the input file, you have to run the tailwind compiler so that it starts watching changes in your HTML files to generate the CSS file. You have to specify the input path and output path for the compiler to run properly. Open a new terminal window in the root directory of your project and run the following command. This command will start the tailwind compiler assuming that you have a CSS file in the root directory.

This command will start watching your changes in HTML files. Don’t close this terminal window otherwise, tailwind wouldn’t scan your changes.

Step 5: Import TailwindCSS Output File in HTML

In the end, create an HTML file and import the output file generated by the tailwind compiler to utilize the power of TailwindCSS classes. The following code snippet imports the output CSS file and uses TailwindCSS classes in HTML.

The example code is available on this repository.

What’s next?

As you have used TailwindCSS in a simple HTML project, you might need to learn more about Tailwind. There are many things you might need for your project. You can read more about the following topics.



Latest articles

Leave a reply

Please enter your comment!
Please enter your name here

Related articles