Getting started with TailwindCSS in seconds.
Tags: css, npm, javascript, webdev
Published: 2019-12-29 19:07:40

If you're familiar with Tailwind and just want to get going, [click me](https://dev.to/didiercatz/getting-started-with-tailwindcss-in-seconds-8p2#hey-this-article-was-about-getting-started-in-seconds-and-you-just-made-me-read-a-paraphrased-version-of-the-documentation).

# First, a small introduction...
For anyone out of the loop, [TailwindCSS](https://tailwindcss.com) 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.

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

gets parsed as:

```scss
 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 

```html
<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
```scss
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.

```scss
@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.

```javascript
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. `purgecss`removes 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](https://tailwindcss.com/docs/controlling-file-size#setting-up-purgecss).

# '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](https://github.com/didier/tailwindcss-parcel-boilerplate).

```bash
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](https://parceljs.org) for watching and bundling your files, and uses [Purgecss](https://www.purgecss.com/) at build time. You won't experience any slowdown while developing this way and still end up with a really small bundle size.

```scala
.
├── 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](https://github.com/didier/tailwindcss-parcel-boilerplate).

Cheers!