Tailwind Note (1)--installation

Tailwind is a tool to help to beautify HTML. It's a popular tool. With this tool, you don't need to write CSS in the <style>. Today I am learning this tool. This is the step of installation. It's a little complex.

1. Install Tailwind with the HTML

The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool. The CLI is also available as a standalone executable if you want to use it without installing Node.js.

1.Install Tailwind CSS

Install tailwindcss via NPM, and create your tailwind.config.js file.

npm install -D tailwindcss
npx tailwindcss init

II. Configure your template paths

Add the paths to all of your template files in your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

III. Add the Tailwind directives to your CSS

Add the @tailwind directives for each of Tailwind’s layers to your main CSS file.

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

IV. Start the Tailwind CLI build process

Run the CLI tool to scan your template files for classes and build your CSS.

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

V. Start using Tailwind in your HTML

Add your compiled CSS file to the <head> and start using Tailwind’s utility classes to style your content.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

2. Install Tailwind with the Vue.js and Vite

I. Creating your project

Start by creating a new Vite project if you don’t have one set up already. Next, install Vite’s front-end dependencies using npm:

npm init vite my-project
cd my-project

II. Setting up Tailwind CSS

Tailwind CSS requires Node.js 12.13.0 or higher. Install Tailwind and its peer-dependencies using npm:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Next, generate your tailwind.config.js and postcss.config.js files:

npx tailwindcss init -p

This will create a minimal tailwind.config.js file at the root of your project:

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Learn more about configuring Tailwind in the configuration documentation.

It will also create a postcss.config.js file that includes tailwindcss and autoprefixer already configured:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

If you’re planning to use any other PostCSS plugins, you should read our documentation on using PostCSS as your preprocessor for more details about the best way to order them alongside Tailwind.

III. Configure Tailwind to remove unused styles in production

In your tailwind.config.js file, configure the purge option with the paths to all of your pages and components, so Tailwind can tree-shake unused styles in production builds:

  // tailwind.config.js
  module.exports = {
-   purge: [],
+   purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

Read our separate guide on optimizing for production to learn more about tree-shaking unused styles for best performance.

IV. Include Tailwind in your CSS

Create the ./src/index.css file and use the @tailwind directive to include Tailwind’s base, components, and utilities styles, replacing the original file contents:

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind will swap these directives out at build-time with all the styles it generates based on your configured design system.

Read our documentation on adding base styles, extracting components, and adding new utilities for best practices on extending Tailwind with your own custom CSS.

Finally, ensure your CSS file is being imported in your ./src/main.js file:

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

You’re finished! Now when you run npm run dev, Tailwind CSS will be ready to use in your Vue 3 and Vite project.

3. Install Tailwind with the Nuxt.

I. Create your project

Start by creating a new Nuxt project if you don’t have one set up already. The most common approach is to use the Nuxt Command Line Interface.

npx nuxi init my-project
cd my-project

II. Install Tailwind CSS

Install tailwindcss and its peer dependencies via NPM, and then run the init command to generate a tailwind.config.js file.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

III. Add Tailwind to your PostCSS configuration

Add tailwindcss and autoprefixer to the postcss.plugins object in your nuxt.config.js file.

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})

IV. Configure your template paths