Getting started with TailwindCSS in seconds.

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!

Comments

[Paweł Kowalski]

If you are looking for a start using TailwindCSS, purgeCSS is really a must - otherwise you end up with 1MB+ of css with everything, instead of whats needed, which is the whole purpose of TailwindCSS.

If you are interested in using it with webpack, take a look at starter i prepared here: github.com/pavelloz/webpack-tailwi...

[Till Kottmann]

I've been wanting to try our tailwind for a while but have been scared of ending up with huge assets + have no idea of how to get a sensible base project set up. Thanks for this!

[Didier Catz]

Go for it, Tailwind is really nice.

github.com/didier/tailwindcss-parc...

[Didier Catz]

I totally agree. It’s also nice to see more people trying to make that whole process easier.

[Brodwolfsky]

This is awesome. After hours of wrestling with prugecss, I have fortunately found your contribution. A real lifesaver. Thank you so much!

[Didier Catz]

Glad I could help!

[Joel Manley]

Nice article and useful boilerplate! For some reason my Javascript file isn't being processed into my "dist/assets" folder, I'm using Vite as the build tool, it's converting everything else just not my js file.

I followed the Tailwind Labs steps as outlined in videos 1 & 8 in their playlist: youtube.com/playlist?list=PL5f_mz_...

Any idea what the issue could be? There doesn't seem to be any articles that use vanilla JS and Tailwind, it's always about using a JS framework with it.