In this blog post I will be diving into the very basics of what TailwindCSS is and hopefully provide some insight as to why I think TailwindCSS is a game changer, so let's get into it.

What is TailwindCSS?

TailwindCSS is a front-end framework that was made with the intention of speeding up development while abiding to the general CSS rules. This framework is among my favourite. Sure it may involve more coding than others, but it's really simple and easy to read.

Most frameworks have pre-set classes that allow you to make elements look a specific way. This is where TailwindCSS sets itself apart from the rest. TailwindCSS was built with the mindset of agility, flexibility as well as improving development speed. To me Tailwind stood out as it worked with classes that described the attributes being used quite nicely in a very easy to understand format. For example to set display: flex; on an element you would just add class="flex" and that would apply the exact same CSS rule, although it does not stop there. It would not surprise me that you can create a whole custom built application without having to look at CSS/SCSS code at all. It's really the little things that make this framework a worth while contender.

TailwindCSS can also make use of PostCSS which is a tool used to convert modern day CSS into something that most browsers won't have an issue running.

Here is an example of TailwindCSS vs. Bootstrap.  (It's important to note that all frameworks have their own use cases).

Bootstrap example:

For example when it comes to setting colours, bootstrap is very limited.

To name a few classes that provide colour : (in Bootstrap)

• bg-dark
• bg-light
• bg-primary
• bg-secondary
• bg-danger
• bg-success
• bg-warning

Here is an example of a Bootstrap class in action:

<div class="bg-primary">// This will set background to blue
This is a Bootstrap styled div
</div>

(In order to add more colours or change the colour to what you would need it be, you would need to dive into some CSS code. )

TailwindCSS Example:

TailwindCSS is very versatile in comparison. For example "bg-red" is the same as "background-color: red;" (Background will be set to red). However if you use "bg-red-400" it will use another shade of red instead. On top of all that there are far more colours to choose from when compared to bootstrap.

Here is an example of a TailwindCSS class in action:

<div class="bg-blue-600">// This will set background to blue but the "-600" defines the shade of blue
This is a TailwindCSS styled div
</div>

What perks do you get for using TailwindCSS?

• For one you get to harness the knowledge from TailwindsCSS's well written documentation which makes it great for CSS beginners as well as CSS masters. There is something for everyone if you invest your time in exploring the documentation.
• You have the ability to compile all the classes which you would want into one class while adding custom styles to it, with the help from the @apply directive that tailwind includes. This allows you to build a whole new class with new CSS rules.
• You have the ability to build custom animations which you can then apply to other classes with ease.
• As mentioned before, you also have access to a lot of colour palettes.
• Thanks to PostCSS your CSS will be prefixed so that it will run on all browsers.
• TailwindCSS's documentation also provides a "code pen" of sorts to allow you to test classes out on elements before you make use of them in your application. Here is a link to the playground. Go wild!

There is just so much more to TailwindCSS that I have not even spoken about. I myself am a novice when it comes to TailwindCSS, but I can see clear benefits from using it.

I hope this blog post was helpful or educational... Maybe try some TailwindCSS yourself and see what benefits you can get out of it. I know that if I am given the opportunity to use TailwindCSS I will most likely use it.

Hope you are ready for part two where I'll dive into greater detail with some actual examples for you to follow along. Anyways until next time.