Getting started with TailwindCSS in seconds.

Didier Catz — Sun, 29 Dec 2019 19:07:40 +0000

If you're familiar with Tailwind and just want to get going, click me.

First, a small introduction...

For anyone out of the loop, TailwindCSS is a CSS utility framework that's been picking up some serious steam. It lets you easily create maintainable styles in the form of configurable class utilities.

<h1 class="font-bold text-6xl leading-none tracking-tight pb-4">Hello world!</h1>

gets parsed as:

 h1 {
  font-weight: 700;
  font-size: 4rem;
  line-height: 1;
  letter-spacing: -0.025em;
  padding-bottom: 1rem;
}

Super neat in my opinion. Another nice-to-have is Tailwind's directives such as @apply.

Using @apply, we can easily create class components. Say you have a design system, and all your buttons have a certain style. Instead of typing

<button class="bg-blue-600 py-8 px-10 my-8 text-white font-bold">Click me</button

for every single button on your site, you could simply do

button {
  @apply bg-blue-600 py-8 px-10 my-8 text-white font-bold;
}

and change global rules accordingly—like vanilla CSS.

"Enough introduction, I want to get started!"

Sure! To get started with TailwindCSS write npm i tailwindcss(or yarn add tailwindcss) inside your project. Then, add the @tailwind directives to your CSS.

@tailwind base;
@tailwind components;
@tailwind utilities;

Then, simply process your CSS using npx tailwind build style.css -o output.css or include Tailwind as a PostCSS plugin. I prefer the latter, as it's easy to integrate with your own tooling.

module.exports = {
  plugins: [
    // ...
    require('tailwindcss'),
    require('autoprefixer'),
    // ...
  ]
}

Controlling bundle size

Now, using the Tailwind CLI/plugin you end up with a bundle size of about 600kb—minified, that is. That's quite a lot. A good way to bundle only the CSS you're using is by configuring purgecss in your project. purgecssremoves all unused styles—yes, including Tailwind's—from your files.

Adding Purgecss to your project is a process of quite a few steps by itself, and you're better off reading into how all that works in the Tailwind docs on bundle size.

'Hey! This article was about getting started in seconds and you just made me read a paraphrased version of the documentation!'

You're completely right. I figured some introduction would be necessary for those who have not heard of TailwindCSS before. But for those who have, or are at least interested to try it after reading this; I've created a little tool to boilerplate a new Tailwind project.

npx tailwindcss-parcel-boilerplate

Simply run the above command and you'll have your own Tailwind project up and running in seconds. It uses Parcel for watching and bundling your files, and uses Purgecss at build time. You won't experience any slowdown while developing this way and still end up with a really small bundle size.

.
├── src
│   ├── assets
│   │   ├── css
│   │   │   └── style.css
│   │   └── js
│   │       └── index.js
│   └── index.html
├── package.json
└── postcss.config.js

A Tailwind setup in seconds—as promised.

Hope you'll find some use out of my tool. If there's anything you'd like to add, please hop on over to the GitHub repository.

Cheers!

DEV Community: Didier Catz

Getting started with TailwindCSS in seconds.

First, a small introduction...

"Enough introduction, I want to get started!"

Controlling bundle size

'Hey! This article was about getting started in seconds and you just made me read a paraphrased version of the documentation!'