How to install Tailwind CSS Version 1.2

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

Initial setup

To save time I reference a project from Adam Wathan called 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

{
  "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 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:

$ 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:

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:

$ npx tailwind init

which generates a blank config to start with:

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

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

$ npx tailwind init --full

This generates the default configuration 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:

$ 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
• CSS Transitions support
• CSS Transforms support

For the full list of changes, check out the complete release notes on GitHub.

Comments

[Will Johnson]

Thanks for this article Tailwind is something I want to dive into once I get done learning Rails