How to use Tailwind CSS on static HTML (with bonus at the end)…

How to use Tailwind CSS on static HTML (with bonus at the end)…

Install Tailwind CSS via NPM

Although it requires a bit more setup and it requires further knowledge of the terminal and JavaScript, it is most definitely the best way to make use of all of the features that Tailwind CSS can provide.

First of all, you need to make sure that you have Node and NPM installed on your machine. If you do, create a project folder and run the following command in the root directory of your project to initialize the NPM configuration file:

npm init

Afterward, install Tailwind CSS using the following command:

npm install tailwindcss --save

This will add Tailwind CSS as a project dependency, and also install the library files inside the node_modules folder. The --save tag ensures that the library is added to the package.json file.

Create the main CSS file

Now that you have Tailwind CSS installed on your project folder, create a main.css file and add the following code to inject the Tailwind CSS code:

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

Setup the Tailwind configuration…