Tabs - NPM - Tailwind Build

   
   
 html  css  
 frontend  
Article Series

Tabs Component Related Articles.

Repository

Where to Discuss?

Local Group

Table of Content

Preface

Goal: Getting a Proper Tailwind Configuration

For learning purpose only.

Reading Reference

Basic Tailwind Command

I won’t give another install tutorials. There is already tons of articles from the internet.

However, this is my working setup.

package.json

For daily development you can use package.json instead:

{
  …
  "devDependencies": {
    "autoprefixer": "^10.0.2",
    "postcss": "^8.1.7",
    "postcss-cli": "^8.3.0",
    "tailwindcss": "^2.0.1"
  }
}

You should do this first

$ npm install --loglevel=error

Tabs Component: Install Tailwind: package.json

Simple Build

Tailwind CSS 1.9 can run perfectly from command line, using global install.

$ tailwindcss build tailwind.css -o styles.css

But since Tailwind CSS 2.0. I have to wrapped it in npm force it to use local node_modules.

{
  …
  "scripts": {
    "build:tailwind": "tailwindcss build tailwind.css -o styles.css",
  }
}

Now I can run this without an issue.

$ npm run --silent build:tailwind

   tailwindcss 2.0.1
  
   🚀 Building: tailwind.css
  
   ✅ Finished in 10 s
   📦 Size: 12.08KB
   💾 Saved to styles.css

Tabs Component: NPM Run Build Tailwind

In order to run this you need to have tailwind.config.js.

tailwind.config.js

A simple working tailwind configuration would be as below:

module.exports = {
  future: {
    purgeLayersByDefault: true,
  },
  purge: {
    enabled: true,
    content: ['./*.html'],
  },
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

[]

PostCSS

There is another way though. I like to use PostCSS to minify the tailwind result.

package.json

{
  …
  "devDependencies": {
    "autoprefixer": "^10.0.2",
    "cssnano": "^4.1.10",
    "postcss": "^8.1.7",
    "postcss-cli": "^8.3.0",
    "tailwindcss": "^2.0.1"
  }
}

postcss.config.js

A simple working PostCSS configuration would be as below:

const cssnano = require('cssnano')

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    cssnano: { preset: 'default' }
  }
}

Using PostCSS

❯ postcss --verbose tailwind.css -o styles.css
Processing tailwind.css...
Finished tailwind.css in 14 s
~/Doc/t/c/01-tabs

Tabs Component: Using PostCSS to Process Tailwind

Watch

There are at least two options for this

  1. NPM Nodemon

  2. NPM Onchange

package.json

Consider add dependency:

{
  …
  "devDependencies": {
    "autoprefixer": "^10.0.2",
    "cssnano": "^4.1.10",
    "nodemon": "^2.0.6",
    "onchange": "^7.1.0",
    "postcss": "^8.1.7",
    "postcss-cli": "^8.3.0",
    "tailwindcss": "^2.0.1"
  }
}

Do not forget to run npm install.

1: NPM Nodemon

$ nodemon --watch tailwind.css --exec 'npm run --silent build:tailwind'

Tabs Component: Nodemon Watch Tailwind

For convenience you can build script in package.json as below:

{
  …
  "scripts": {
    "build:tailwind": "tailwindcss build tailwind.css -o styles.css",
    "nodemon:tailwind": "nodemon --exec 'npm run build:tailwind'",
    "nodemon:watch": "npm run nodemon:tailwind -- --watch ./tailwind/tailwind.css"
  }
}

2: NPM Onchange

$ onchange tailwind.css -i -- npm run  --silent build:tailwind

Tabs Component: Onchange Watch Tailwind

For convenience you can build script in package.json as below:

{
  …
  "scripts": {
    "build:tailwind": "tailwindcss build tailwind.css -o styles.css",
    "watch:tailwind": "onchange tailwind.css -i -- npm run  --silent build:tailwind",
  }
}

Multiple Tailiwind Stylesheet

This article require three kind of tailwind build, all in tailwind directory I arranged the script as below:

{
  …
  "scripts": {
    "build:tailwind:01": "tailwindcss build ./tailwind/01-tailwind.css -c ./tailwind/tailwind.config.js -o ./css/01-tailwind-basic.css",
    "watch:tailwind:01": "onchange './tailwind/01-tailwind.css' -i -- npm run build:tailwind:01",

    "build:tailwind:03": "tailwindcss build ./tailwind/03-tailwind.css -c ./tailwind/tailwind.config.js -o ./css/03-tailwind-simple.css",
    "watch:tailwind:03": "onchange './tailwind/03-tailwind.css' -i -- npm run build:tailwind:03",

    "build:tailwind:04": "tailwindcss build ./tailwind/04-tailwind.css -c ./tailwind/tailwind.config.js -o ./css/04-tailwind-enhanced.css",
    "watch:tailwind:04": "onchange './tailwind/04-tailwind.css' -i -- npm run build:tailwind:04",
  }
}

I have limitation on NPM knowledge. Maybe someday I’ll get a better idea.

What’s Next?

After install, why don’t we moved on to examples?

Consider continue reading [ Tabs - CSS - Tailwind CSS ].