How to use Tailwind a CSS framework

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

I decided to try Tailwind CSS after having more headache than happy thoughts with Bootstrap, nothing against who uses, it can be practical and fast to use, but as a downside your website you look pretty much like everyone else’s.

Tailwind, on the other hand, doesn’t have any navbar or button styling, when it says it’s low level it means it, take for example how to set a container:

That is all there is, with Tailwind you have pre-made classes with nothing more than one attribute,

Adding Tailwind to your project

I started this project using a pm that creates js projects for me, you can find it here, this is not a necessary step and you can use Tailwind in any kind of project

There are many ways of setting up TailwindCss, I have decided to use npm on mine, so on the terminal inside your project directory run:

Then, on your src folder create a css file and add:

If you used create-js-app you will have a package.json, you will need to add a build command to create your CSS file.

Now you only need to run: npm run build:css

And you can see the changes in dist/style.css

Now you are all set, you can use Tailwind documentation to find what you need, and then you add the classes to your project.