快速安装Tailwind的最新版本_tailwind安装-优快云博客

如何快速安装最新版本@3Tailwind：

具体步骤：

安装@3版本的tailwindcss步骤：

1. npm install -D tailwindcss

npx tailwindcss init

在tailwind.config.js中

  /** @type {import('tailwindcss').Config} */

    module.exports = {

      content: ["./src/**/*.{html,js}"],

      theme: {

        extend: {},

      },

      plugins: [],

    }

2. 创建一个main.css的文件

导入以下文件:

      @tailwind base;

      @tailwind components;

      @tailwind utilities;

3. 创建index.html文件

  <!DOCTYPE html>

        <html lang="en">

        <head>

          <meta charset="UTF-8">

          <meta http-equiv="X-UA-Compatible" content="IE=edge">

          <meta name="viewport" content="width=device-width, initial-scale=1.0">

          <link rel="stylesheet" href="/dist/output.css">

          <title>Document</title>

        </head>

        <body>

          <h1 class="text-3xl font-bold underline">hello world!</h1>

          <div class="bg-purple-600 bg-opacity-25 w-20 h-20"></div>

        </body>

        </html>

4. npm init -y 生成package.json文件

5. 在package.json 添加命令 "build": "tailwindcss -i ./src/main.css -o ./dist/output.css --watch"

6. npm run build

注意：顺序不要颠倒！！！要在src目录下！！！