Tailwind CSS- the best CSS framework? 
Tags: tailwindcss, css, html
Published: 2021-08-07 16:55:43

## 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 
![image of code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kldrh2lzlpswrb87ra2r.png)
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. 
![image of code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8eo8544u1bggyz79iwyh.png)

**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.
![image of code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p057fj66taa7dh1c1vzg.png)

**Step 3- Create your Tailwind Configuration file**

Run the following code into your terminal
![code image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yehf7i6o0sszzg8xeu4q.png)

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

![code image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rd8z5nw2262frahtk2gf.png)

**Step 4- Add the Postcss file** 
In the terminal run 
![code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ip0n6q13hbipmu1xpufu.png)

After running the above installation is complete run the following code into the terminal.
![code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zqh9x6nt4puv1mya9d9j.png)

You will now have a postcss.config.js file. Add the following code to the plugins.
![code image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vfdig2tlplv7hw4tzx00.png)
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** 
![code image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zc210y3hjipxb8sf2vx2.png)
**Followed by**

![code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i0zsrzr4gutmyx8qed6e.png)
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](https://tailwindcss.com/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](https://tailwindcss.com/)
[William Vincent- a beginner's guide](https://wsvincent.com/learn-tailwind-css-beginners-guide/)
[Tailwind for absolute beginners](https://codingthesmartway.com/tailwind-css-for-absolute-beginners/)
[Free Code Camp- how to use Tailwind CSS](https://www.freecodecamp.org/news/what-is-tailwind-css-and-how-can-i-add-it-to-my-website-or-react-app/)