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.
Step 5- Finally in the terminal run
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
Top comments (2)
You can embed code snippets with markdown using backticks, which would make them accessible to everybody.
Thank you for your great point.