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;