Tailwind Toolbox - Setup Tailwind CSS v1.0

It's pretty straight forward to setup Tailwind and give it a test spin using the CDN version. However, as mentioned on the Tailwind site, you need to setup Tailwind using npm in order to start customising Tailwind.

Note: this guide is subject to change with changes to v1.0

This guide will help beginners get to grasp with:

Setting up Node.js/npm and Tailwind on their own local environment

Download the Tailwind Starter Template ready for development

Customise the tailwind.config.js and tailwind.config.css to create the tailwind.css for your project

Use purgecss/cssnano to remove unused CSS and minify the final CSS file

Huge thanks to https://flaviocopes.com/tailwind-setup/ for the excellent setup guide which helped create the starter template.

Setup Node.js/npm

Download and install Node.js/npm

Download Node.js + npm

Open your node command prompt/terminal and check if you have Node.js / npm installed:

node -v and then npm -v

>>node -v

v8.12.0

>>npm -v

6.9.0

Update your npm:

npm install -g npm

>>npm install -g npm

(some npm messages)
+ npm@6.9.0
added 387 packages from 770 contributors in 86.554s

Tailwind-Starter Setup

Create your 'project-name' folder and clone the repository

git clone https://github.com/tailwindtoolbox/StarterTemplate.git

Or alternatively, just download the Tailwind-Starter zip file and extract the contents.

Download Tailwind-Starter (zip)

Open package.json and then edit the follow section of the file to match your project

"name": "TailwindStarterTemplate",
"version": "1.0.0",
"description": "Tailwind Starter Template",
"license" : "MIT",
"repository": {
"type" : "git",
"url" : "https://github.com/tailwindtoolbox/StarterTemplate.git"
},

Refer to https://docs.npmjs.com/files/package.json for guidance

Open your node command prompt/terminal and navigate to your 'project-name' folder and create the `node_modules` directory

npm install or npm update

>>npm update

(some npm messages)
+ cssnano@4.1.10
+ postcss-cli@6.1.2
+ tailwindcss@1.0.2
+ autoprefixer@9.5.0
+ @fullhuman/postcss-purgecss@1.1.0
added 472 packages from 355 contributors and audited 4131 packages in 122.868s
found 0 vulnerabilities

Refresh the Tailwind.js file

npm run del:js && npm run create:js

>>npm run del:js && npm run create:js

> TailwindStarterTemplate@1.0.0 del:js C:\project-name
> rimraf tailwind.config.js

> TailwindStarterTemplate@1.0.0 create:js C:\project-name
> tailwind init tailwind.config.js

tailwindcss 1.0.2

✅ Created Tailwind config file: tailwind.config.js

Create the initial css file

npm run dev:css

>>npm run dev:css

> TailwindStarterTemplate@1.0.0 dev:css C:\project-name
> tailwind build tailwind.config.css -c tailwind.config.js -o dist/css/tailwind.css

tailwindcss 1.0.2

🚀 Building... tailwind.config.css

✅ Finished in 890 ms
📦 Size: 395.04KB
💾 Saved to dist/css/tailwind.css

Start building your website using the starter template in the dist folder.

Customising Tailwind

Customise tailwind.config.js

To make changes to the configuration, go to your 'project-name' folder and open tailwind.config.js and make amendments for your website (e.g. update the colour palette, fonts etc).

Refer to the Tailwind documentation for more information: Configure tailwind.js

Example: Adding two new colour classes 'primary' and 'secondary' and some useful heights

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    // Some useful comment
    extend: {
      colors: {
        'primary': '#3b7977',
        'secondary': '#57a99a',
      },
      height: {
        '128': '20rem',
        'half': '50vh',
        '3/4': '75vh'
      },
    },
  variants: {
    // Some useful comment
  },
  plugins: [
    // Some useful comment
  ]
}

Customise tailwind.config.css

As your development goes on and you start getting a lot of repetition of CSS classes, you can create your own utilities and components

Refer to the Tailwind documentation for more information: Add new Utilities and Extract Components

Example: Creating a component class for a button

@tailwind components;

.btn {
@apply bg-brand text-white text-sm border-none rounded font-bold p-3 mt-2;
}
.btn:hover {
@apply bg-teal-dark;
}
...

This will allow you to setup a button using:
<a href="#" class="btn">Click Me!</a> instead of
<a href="#" class="bg-brand text-white text-sm border-none rounded font-bold p-3 mt-2 hover:bg-teal-dark">Click Me!</a>

Updating tailwind.css for your project

After any changes to tailwind.config.js and tailwind.css, you must recreate the tailwind css file in order to get the updated classes/utilities for use in your project.

Open your node command prompt/terminal run:

npm run dev:css

>>npm run dev:css

Create purged and minified css

Once you have finalised your project you can build the final minified version (tailwind.min.css in the /dist/css folder) which will remove all of the classes which you have not used within your project.

Open your node command prompt/terminal run:

npm run build:css

>>npm run build:css

> TailwindStarterTemplate@1.0.0 build:css C:\project-name
> postcss tailwind.config.css -o dist/css/tailwind.min.css