Have only 30 seconds and want to create a Tailwind CSS project? I got you.
Tags: tailwindcss, css, webdev, design
Published: 2020-05-23 16:45:57

Create a CSS file inside your project and paste this (I'll call mine `styles.css`):

```css
@tailwind base;

@tailwind components;

@tailwind utilities;
```

Now run in your terminal:

```sh
npx tailwindcss build styles.css -o output.css
```

Your Tailwind CSS styles are waiting for you at `output.css`. Just place it inside your HTML and you're done.

```html
<link rel="stylesheet" href="output.css" />
```

DONE.

Now, if you have a little more time, let me give you some tips that will save you more than 30 seconds.

## I need to extend it

The above setup will create a CSS file with all Tailwind CSS standards, which weights around 2MB, that's ok for development. When you finish your layout, or find that you need to extend some utilities, change fonts, etc, you'll need a configuration file. Oh, and there's a command for that:

```sh
npx tailwindcss init
```

This will create `tailwind.config.js` for you:

```js
module.exports = {
  theme: {},
  variants: {},
  plugins: [],
}
```

You'll probably be fine without it for some time, and if you need to extend it, there are tons of examples in the [official docs](https://tailwindcss.com/docs/theme/#app).

## I want to remove unused styles

It's a great idea. All you gotta do is tell Tailwind where are you using it's styles. It's as simple as adding a `purge` option to `tailwind.config.js` with the path to your files. Say you are working with `html`, `jsx` and `vue` files somewhere inside `src`, it would look like this:

```js
module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.vue',
    './src/**/*.jsx',
  ],
  theme: {},
  variants: {},
  plugins: [],
}
```

It will remove unused styles whenever your `NODE_ENV` is set to `production`.

BUT! You're busy, you just have 15 seconds more and cannot create a build environment! Just pass `purge` an object, put your paths inside the `content` property and add an `enabled` flag:

```js
module.exports = {
  purge: {
    enabled: true,
    content: [
      './src/**/*.html',
      './src/**/*.vue',
      './src/**/*.jsx',
    ],
  },
  theme: {},
  variants: {},
  plugins: [],
}
```

Now, you can run `npx tailwindcss build styles.css -o output.css` and your CSS will only contain used styles! Note that we don't even have a proper npm project yet, there's no `package.json`, no `npm install`...

## What about minification and prefixes?

So, if you're thinking about minified CSS, you're probably worried about production CSS, then you probably already have a more robust project, with some other packages around. In this case, you'll need 4 more:

```sh
# npm install --save-dev does the same as npm i -D
npm i -D postcss-cli tailwindcss autoprefixer cssnano
```

PostCSS is a preprocessor and will run Tailwind (with the config you made earlier), prefix everything with Autoprefixer and minify with CSSNano.

For all of this to work together, you'll need a file called `postcss.config.js`:

```js
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('cssnano')({
      preset: 'default',
    }),
  ],
}
```

This will give you just the CSS you need, browser prefixes and minification. In your `package.json` you can create a build script that will run PostCSS:

```js
"build:css": "postcss tailwind.css -o output.css"
```

You can use Tailwind with other preprocessors and [find other setups in the docs](https://tailwindcss.com/docs/using-with-preprocessors/#app)

But if you really read until here, you would find so much more value watching the [official screencasts](https://tailwindcss.com/screencasts/).