Tailwind Toolbox - Setup Tailwind CSS starter template

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.

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 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.0-beta.3
+ 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.0-beta.3

✅ 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.0-beta.3

🚀 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'

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    // Some useful comment
    colors: {
      ...defaultTheme.colors,
      'primary': '#3b7977',
      'secondary': '#57a99a'
    },
  },
  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