What The Heck is Tailwind CSS Anyway
How many lines of CSS code you’ve written in last project? If you answer. A lot or even close to that. Then you are in a right place. In this post, we’ll look at Tailwind CSS. By which you can cut down your lines of CSS by 90%. Yes, you read that right. I’ve been using Tailwind CSS for a while now and I’ve not written single line of CSS.
What is Tailwind CSS?
If it was me, I would’ve named Tailwind CSS, No CSS because, that’s what it is. You don’t write CSS. Tailwind CSS is Utility first CSS framework. It’s has CSS utility classes for almost all the CSS styling properties. We don’t have to write CSS to style our elements. Instead we can use CSS utility classes generated by Tailwind CSS to style our elements.
Let’s look at an example
Below we have two similar cards. The only difference is that one’s with Pure CSS (Left) and other with Tailwind CSS (Right).
Here is the code
You can see in the above code. How many lines of CSS we wrote to style the card. For the other card, no CSS at all.
Setup Tailwind CSS
If you want to get started and test it out. I recommend you use CDN. Apart from that. You should always consider settings up Tailwind CSS. To take advantage of all the customisations and configurations.
There are a lot of tools you can use to setup Tailwind CSS. Like Webpack, Parcel, my favourite Laravel Mix which is a wrapper for Webpack and couple other.
In this post. We’ll setup Tailwind CSS with Parcel because it super simple and gives you a lot of control.
Let’s create new folder.
mkdir my-tailwindcss-project && cd my-tailwindcss-projectInit npm project in that folder
npm init -yNow, install Parcel bundler by running commands below
npm install --save-dev parcel-bundlerInstall Tailwind CSS
npm install tailwindcssPostCSS Config
Tailwind CSS in written in PostCSS. That means will need PostCSS to generate our Tailwind CSS file. Let’s configure it.
Create file named postcss.config.js in project folder and paste the below code in it.
module.exports = {
plugins: ["tailwindcss"]
};Now, we’ve the PostCSS config ready. Let’s create a PostCSS file to generate our Tailwind CSS file. Create tailwindcss.pcss file in project folder and copy the code below.
@tailwind base;
@tailwind components;
@tailwind utilities;Here, we are generating base which is normalize-css, components and utilities. There is a lot of stuff you can configure. For more info refer to official docs.
Putting everything together
Let’s wire up and see things in actions. Create index.html in project folder and copy the code below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/tailwindcss.pcss" />
<title>Document</title>
</head>
<body></body>
</html>Run npx parcel index.html.
If you look at the page source. You should see all the css classes generated.
Let’s test it out
Add the below code in the body to index.html to test.
<div class="shadow-2xl px-12 py-4">
<div class="w-40 h-40 bg-gray-800 mx-auto mb-4 rounded-full text-center">
<span class="text-6xl text-white m-8 inline-block">Va</span
</div>
<h1 class="text-center text-blue-500">Varun</h1>
<p class="text-center text-gray-600 mb-4">Software Developer</p
<button class="block m-auto w-40 text-white bg-blue-500 text-center rounded-lg border-0 uppercase p-2">Follow</button>
</div>Save and run. You should see a card, we have seen early in this post. If you’ve notice. We generated a lot of CSS which is not used all it. To remove unused CSS. We can configure or use PurgeCSS to remove unused CSS in production.
Congrats. You can setup and use Tailwind CSS in your project now.
Hope you learnt something.
