How to install Tailwind CSS Version 1.2
Tags: tailwindcss, css, javascript, tutorial
Published: 2020-03-15 20:48:23

[Tailwind CSS](https://tailwindcss.com/) version 1.2 is the most recent release of the CSS framework. This is a short guide that teaches you how to install it in the most basic form.

In this guide, I reference an older article where I installed a beta version of Tailwind which you can find [here](https://web-crunch.com/posts/how-to-install-tailwind-css).

{% youtube niSB60MMERw %}

### Initial setup

To save time I reference a project from Adam Wathan called [playground](https://github.com/tailwindcss/playground). The first thing we'll do is clone the repo to our own system and make a few changes.

I used this template because a lot of the scripts you'll find inside the `package.json` file are pre-configured and because well, I'm a bit lazy :)

The important things to note are that I removed the following:

- `.git` folder
- `.vscode` folder
- `tailwind.config.js` file

And changed the package.json file to not include `tailwindcss` by default as the template has. We'll install this manually.

My `package.json` file then resembles the following

```json
{
  "scripts": {
    "serve": "cross-env NODE_ENV=development concurrently \"postcss public/tailwind.css -o public/build/tailwind.css --watch\"  \"live-server ./public\"",
    "development": "cross-env NODE_ENV=development postcss public/tailwind.css -o public/build/tailwind.css",
    "production": "cross-env NODE_ENV=production postcss public/tailwind.css -o public/build/tailwind.css",
    "start": "npm run serve"
  },
  "dependencies": {
    "autoprefixer": "^9.5.1",
  },
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^1.2.0",
    "concurrently": "^4.1.0",
    "cross-env": "^5.2.0",
    "cssnano": "^4.1.10",
    "live-server": "^1.2.1",
    "postcss-cli": "^6.1.2"
  }
}
```

### Tailwind CSS Installation 

Referencing the [installation](https://tailwindcss.com/docs/installation) page we can install Tailwind CSS using `yarn` or `npm` (use whatever you prefer).

I'll first run `yarn` within my project in a new terminal instance to install the other packages already declared in the `package.json` file thanks to the template.

Then we can install tailwind specifically by running:

```bash
$ yarn add tailwindcss
```

The template we downloaded saves use time on the next step by already adding the `@tailwind` directives to our project. Those can be found in the `public/tailwind.css` file. 

#### Configure the `postcss.config.js` file

Our project makes use of Post CSS exclusively. In doing so you need a configuration file which again the template has already created for us. Inside the `postcss.config.js` file we'll find the following code:

```javascript
const purgecss = require('@fullhuman/postcss-purgecss')({
  content: ['./public/**/*.html'],
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
})

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    ...process.env.NODE_ENV === 'production'
      ? [purgecss, require('cssnano')]
      : []
  ]
}

```

This code is doing a handful of things

- requiring both Tailwind CSS, autoprefixer, purge-css and cssnano (all node modules)
- configuring Purge CSS to handle removing unused CSS in our node production environment only.



#### Create a tailwind config file

The holy grail of Tailwind CSS is the `tailwind.config.js` file. This file can be custom named if you prefer. To create one you can actually generate one dynamically on the command line like so:

```bash
$ npx tailwind init
```

which generates a blank config to start with:

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

What I prefer to do is start with the default values of the config:

```bash
$ npx tailwind init --full
```

This generates the [default configuration](https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js) that's a bit easier to tweak if you ask me.



### Done

With those few steps, we now have a functioning framework. You can try things out by running:

```bash
$ yarn serve
```

When this script runs PostCSS transpiles the tailwind code into all the CSS we declared based on the `tailwind.config.js` file. Thanks to the other node modules we installed we get the benefits of live reloading as well. Notice the new `public/build/` folder. The CSS file inside is the final piece of the CSS puzzle.



### New in Version 1.2

This is sourced directly from https://tailwindcss.com/docs/release-notes

Here are the features you're probably going to be the most excited about:

- [CSS Grid support](https://tailwindcss.com/docs/grid-template-columns)
- [CSS Transitions support](https://tailwindcss.com/docs/transition-property)
- [CSS Transforms support](https://tailwindcss.com/docs/scale)

For the full list of changes, [check out the complete release notes on GitHub](https://github.com/tailwindcss/tailwindcss/releases/tag/v1.2.0).