综合开发

What The Heck is Tailwindcss.

微信扫一扫,分享到朋友圈

What The Heck is Tailwindcss.

What The Heck is Tailwind CSS Anyway


Mar 22
·3min read


Photo by Pankaj Patel
on Unsplash

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).

Left (CSS) and Right (Tailwind CSS)

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-project

Init npm project in that folder

npm init -y

Now, install Parcel bundler by running commands below

npm install --save-dev parcel-bundler

Install Tailwind CSS

npm install tailwindcss

PostCSS 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.

苹果要求App切换到iOS 13 SDK进行开发 最后期限延长

上一篇

JavaScript News and Updates (February & March 2020)

下一篇

你也可能喜欢

评论已经被关闭。

插入图片

热门栏目

What The Heck is Tailwindcss.

长按储存图像,分享给朋友