How to use TailwindCSS 3 with plain HTML

Final product

Long story short every time I searched something along the neighborhood of “How to use tailwindcss with html” or “how to install tailwind in simple html” I found an article that was old and thus the instructions where not applicable any more which led my to loose my interest every single time I tried.

Today I decided to search a little bit more in depth an try to change some of the generated files I got from npm/npx and I finally had it working 🎉

So lets get our hands dirty, shall we?

Prerequisites:

• NPM installed
• A code editor (optional)
• Access to a terminal
• Internet access

First things first, we need to do is to make a new folder which will contain all of our project files.

We can do this by executing the following command (Windows/Mac)

mkdir plain_html_tailwind

After creating our root folder we need to navigate inside it and start installing our dependences.

Windows/Mac

cd plain_html_tailwind

Now that we are ready to start let’s pull up the tailwindcss docs for PostCSS. The first thing that we need to do is to install tailwindcss, postcss and autoprefixer, thankfully the tailwindcss team has provided us with a copy/paste command for that.

npm install -D tailwindcss postcss autoprefixer

Then we need to initialize tailwindcss by running the following command

npx tailwindcss init

When these two are finished executing we can open our project folder using the code editor, for me it’s vs code so I’ll just run

code .

At this moment your folder structure should be looking something like that.

Next, you need to make a postcss.config.js file and add the following

After saving and closing postcss.config.js you’ll need to open the tailwind.config.js which should be looking something like this

And change the line #2 from content: [], to content: ["./src/**/*.{html,js}"],

Save the file and then create a file named tailwind.css and add the 3 following lines of code

Now make a folder called src and inside that make two files, one called index.html and one called styles.css which will be empty, The index.html should have the following

If you were to open the file in a browser it would look like this

Aaaand that’s where the fun begins, first of all your folder structure should be looking something like this

I promise we are almost done, there are some things we need to do first. To begin with you need to open the package.json and add the following lines after "devDependancies"

Save the file and on your terminal run

npm run buildTailwind

We are almost there, just open the index.html and before the <title>TailwindCSS Works</title> add

Your index.html should look like that

And we are done 🎉 Just open the file in your browser and you should be having something like that

Please keep in mind that every time you add/remove/change html classes related to tailwindcss you’ll need to re-run the build command from above.

This is my first Medium post, I hope you found it useful!

Thanks for making it this far. Follow me for more!

References

1. https://tailwindcss.com/docs/installation/using-postcss