What is Tailwind CSS?
Tailwind CSS is one of the straightforward CSS frameworks to build websites with ease and speed. At the same time, you can create fantastic user interfaces.
How to set up Tailwind and get it to work?
The set-up is easy by following the three main steps:
Install the Tailwind framework via a terminal. Tailwind CSS does provide clear instructions on how to set it up.
Set up the tailwind.config.js file by adding colours, sizes, weights and other variables needed for the website. The config file can be flexible for more variables.
Set up the main.css file with the directives -see below. You can add more custom CSS if needed.
@tailwind base;
@tailwind components;
@tailwind utilities;After the above steps, you can start working on the HTML and add classes - shown in the example below. Test the site to see what it will show. Tailwind does provide any troubleshooting if there are any problems.
<h1 class="text-3xl font-bold underline">Hello world!</h1>How did I find out about Tailwind CSS?
The first release of the tailwind CSS framework came out in November 2017. However, I did not find out until mid-2020. Before working on a new web project, we needed to build a lightweight and fast website. Afterwards, we realised how good Tailwind CSS is.
What happened after completing the first Tailwind project?
As time went by for new web projects and the Tailwind CSS enhancing their framework, it became better.
Tailwind CSS has taught me about building a mobile-first website. Over 50% of the web traffic come from mobile and tablet devices. Therefore, it is a priority to think about the users and mobile devices.
Another crucial tip is improving the performance speed of the website using Google’s Lighthouse. One of the recommendations is to remove unused CSS. Tailwind CSS solves this issue when building the final CSS bundle for production, making it the smallest file it can be.
“Most Tailwind projects ship less than 10kb of CSS to the client.”
Are there other benefits of tailwind?
The naming conventions in the class of the element is so much cleaner. Before Tailwind CSS, you need to create custom class names and apply custom styling to them in the CSS file. But with Tailwind CSS, you don’t need to write so much styling. It is possible to write necessary styling in the CSS file that Tailwind CSS does not cover.
Are there any drawbacks?
Tailwind CSS does not support Internet Explorer browsers, including IE11. I don’t believe it’s a massive issue. Internet Explorer is an outdated browser and has informed visitors that most websites may not work, advising them to upgrade to Microsoft Edge.
Would I go back to any other framework like Bootstrap?
If the existing web projects have another CSS framework like Bootstrap or Susy, I will continue to work with them. If the time has come to upgrade the framework, or if the website has a retheme, I would consider switching frameworks. However, if it is a new website from scratch, I would go straight to Tailwind, even for a small web project.