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.
- 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
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".
Step 1- Install package
Step 2- Add tailwind to your created CSS file
Step 3- Create your Tailwind Configuration file
After running you will notice a new file appear in your project called tailwind.config.js which contains the following code
You will now have a postcss.config.js file. Add the following code to the plugins.
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.