Tailwind CSS

Tailwind CSS is a CSS framework that can produce minimum classes for your app. It means the CSS file only contains the required classes for your app. So the CSS file can be compact. It will be perfect for production.

It is better than traditional or other CSS frameworks that load all classes. In Tailwind CSS, we utilize the code to approach the design then produce the production version of it. Technically, it loads all classes then produces the minified version and contains only used classes.

You can visit this page to get started, https://tailwindcss.com/docs/installation. Many integration guides let you work with many frameworks such as React, Vue, or Laravel. You also can install Tailwind CSS as a PostCSS plugin. Here, let me show you the minimum usage of Tailwind CSS using Tailwind CLI. The minimum usage means we work without any framework or tool such as React, Vue, Laravel, or PostCSS. Just pure CSS or Tailwind CSS. Maybe you get confused to start with the official documentation.

  1. First, let's create the package.json file by npm init.
  2. npm install -D tailwindcss@latest postcss@latest autoprefixer@latest to install Tailwind CSS, PostCSS, and Autoprefixer.
  3. npx tailwindcss init to create the tailwind.config.js file.
  4. npm install @tailwindcss/forms to install the form plugin. Then add the plugin to the tailwind.config.js file. Because sometimes we need form elements. More information is on https://github.com/tailwindlabs/tailwindcss-forms
  5. Add npx tailwindcss -i ./tailwind.css -o ./app.css --watch as a dev script to the package.json.
  6. Add NODE_ENV=production npx tailwindcss -i ./tailwind.css -o ./app.css --minify as a prod script to the package.json.

Here is an example of package.json.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

{
  "name": "tailwindcss-cli",
  "version": "1.0.0",
  "description": "Minimum usage of Tailwind CSS using Tailwind CLI.",
  "main": "index.js",
  "scripts": {
    "dev": "npx tailwindcss -i ./tailwind.css -o ./app.css --watch",
    "prod": "NODE_ENV=production npx tailwindcss -i ./tailwind.css -o ./app.css --minify"
  },
  "repository": {
    "type": "git",
    "url": "git+ssh://git@github.com/aristorinjuang/tailwindcss.git"
  },
  "keywords": [
    "tailwind",
    "tailwindcss",
    "css"
  ],
  "author": "Aristo Rinjuang",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/aristorinjuang/tailwindcss/issues"
  },
  "homepage": "https://github.com/aristorinjuang/tailwindcss#readme",
  "devDependencies": {
    "autoprefixer": "^10.3.6",
    "postcss": "^8.3.8",
    "tailwindcss": "^2.2.16"
  },
  "dependencies": {
    "@tailwindcss/forms": "^0.3.3"
  }
}

Here is an example of tailwind.config.js. The purge field means it will read the file to scan the used classes.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

module.exports = {
  purge: [
    "./index.html",
    "./app.js"
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

Here is the basic of tailwind.css.

1
2
3

@tailwind base;
@tailwind components;
@tailwind utilities;

We can use npm run dev while development and npm run prod while production. Feel free to clone this repository, https://github.com/aristorinjuang/tailwindcss.

Related Articles