DEV Community

Cover image for Getting started with TailwindCSS in seconds.
Didier Catz
Didier Catz

Posted on • Updated on

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>
Enter fullscreen mode Exit fullscreen mode

gets parsed as:

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

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
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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'),
    // ...
  ]
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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!

Discussion (7)

Collapse
pavelloz profile image
Paweł Kowalski • Edited on

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

Collapse
deletescape profile image
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!

Collapse
didier profile image
Didier Catz Author • Edited on

Go for it, Tailwind is really nice.

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

Collapse
didier profile image
Didier Catz Author

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

Collapse
brodwolfsky profile image
Brodwolfsky • Edited on

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

Collapse
didier profile image
Didier Catz Author

Glad I could help!

Collapse
joelamanley profile image
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.