Tailwind CSS- the best CSS framework?

Sara — Sat, 07 Aug 2021 16:55:43 +0000

So what is Tailwind CSS?

Tailwind CSS is summarised as a utility-first CSS framework. The first release of Tailwind CSS was in November 2017 which saw the framework get adopted by tech giants such as Mozilla. Today Tailwind CSS has taken the lead as the most popular CSS framework, leaving behind previous front runners like Bootstrap.

The beauty of Tailwind CSS is that it allows developers to easily customize CSS classes to create unique styles and custom user interfaces. With Tailwind CSS the developer has free-reign when it comes to choosing styles as there are no restrictive design stipulations. This design autonomy is why many developers are opting for Tailwind CSS as opposed to frameworks like Bootstrap that come with preset style kits.

Benefits of Tailwind CSS

Power to create truly unique styles/websites
Non-restrictive framework- no preset styles/components
Ability to reuse component styles
Easy and fast to use
Create responsive websites
Smaller CSS files

Tailwind CSS in action

The above code really illustrates the ease in which a developer can style html elements quickly through Tailwind classes and create the user interface that they want. I created the height for the image with "h-30" and added a margin of 1.5rem with the "m-6" class. I was able to directly edit the text positioning and colour of the text in the h2 element with "text-center text-pink-400". I was also able to customise padding around the h2 element with "px-2 pb-5".

How to get started with Tailwind CSS

Step 1- Install package

In the terminal run the following code to install the Tailwind CSS package.

Step 2- Add tailwind to your created CSS file

After creating a CSS file, copy the following code into the file. What this does it allow you to use Tailwind by adding it to your project.

Step 3- Create your Tailwind Configuration file

Run the following code into your terminal

After running you will notice a new file appear in your project called tailwind.config.js which contains the following code

Step 4- Add the Postcss file
In the terminal run

After running the above installation is complete run the following code into the terminal.

You will now have a postcss.config.js file. Add the following code to the plugins.

PostCSS is a tool used for transforming CSS with Javascript plugins. It allows you to get access to the Tailwind by adding it to the plugin. It creates a build folder where the processed Tailwind is outputted.

Step 5- Finally in the terminal run

Followed by

This completes the installation process. Now you need to create a index.html file where you will be executing your Tailwind CSS code!.

You are now ready to use Tailwind CSS

Now that you are up and running it is time to get creative with Tailwind CSS. Go through the extensive and limitless Tailwind Docs to create your own unique website and have fun!

You can now firsthand experience how powerful Tailwind CSS is and it might just become your favourite CSS framework.

To further explore Tailwind CSS check these out

Tailwind Official Website
William Vincent- a beginner's guide
Tailwind for absolute beginners
Free Code Camp- how to use Tailwind CSS