vue工具之安装TailwindCSS--3.0

一、CDN方式引入页面

⏰ 在html页面的<head>标签中引入
<script src="https://cdn.tailwindcss.com"> </script>

<!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">
    <title>Document</title>
    <!-- 引入标签 -->
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
    <h1 class="m-7 text-3xl font-bold underline">
        Hello world!
    </h1>
</body>

</html>

结果：

二、使用Tailwind Cli安装

在项目目录下初始化项目, 然后安装tailwindcss, 并创建tailwind.config.js文件.

☘️ 1. 在项目目录下初始化项目

npm init -y

☘️ 2. 安装tailwindcss

_{通过 npm 安装 tailwindcss，然后创建你自己的 tailwind.config.js 配置文件。}

npm install -D tailwindcss
npx tailwindcss init

☘️ 3. 设置tailwind.config.js文件

_{在 tailwind.config.js 配置文件中添加所有模板文件的路径。}

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

☘️ 4. 根目录创建main.css文件, 引入tailwindcss命令

_{在你的主 CSS 文件中通过 @tailwind 指令添加每一个 Tailwind 功能模块。}

/* main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

☘️ 5. 打开package.json文件, 在scripts中添加build命令.

{
  "name": "tailwind-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    //👉：添加build
    "build": "npx tailwindcss -i main.css -o ./public/dist/main.css",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "tailwindcss": "^3.0.13"
  }
}

☘️ 6. 创建dist/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">
    <title>Document</title>

    <!-- 引入编译后的css文件 -->
    <link rel="stylesheet" href="./dist/main.css">
</head>

<body>
    <h1 class="m-7 text-3xl font-bold underline">
        Hello world!
    </h1>
</body>

</html>

☘️ 7. 项目目录终端运行build命令

npm run build

使用live server或者直接在浏览器打开index.html文件即可

三、PostCSS方式引入

使用npm安装talwindcss postcss autoprefixer, 生成tailwind.config.js文件

☘️ 1. 初始化npm项目

npm init --yes

☘️ 2. 安装talwindcss postcss autoprefixer
_{通过 npm 安装 talwindcss postcss autoprefixer，然后创建你自己的 tailwind.config.js 配置文件。}

npm install tailwindcss postcss autoprefixer -D
npx tailwindcss init

☘️ 3. 设置tailwind.config.js文件

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

☘️ 4. 创建postcss.config.js

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested')
  ]
}

☘️ 5. 根目录创建main.css文件, 引入tailwindcss命令

/* main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

☘️ 6. 打开package.json文件, 在scripts中添加build命令.

{
  "name": "tailwind-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    // 添加build
    "build": "postcss main.css -o public/dist/main.css",
    
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "tailwindcss": "^3.0.13"
  }
}

☘️ 7. 创建dist/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">
    <title>Document</title>
  
       <!-- 引入编译后的css文件 -->
    <link rel="stylesheet" href="./dist/main.css">
  
</head>
<body>
    <h1 class="m-7 text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

☘️ 8. 项目目录终端运行build命令

npm run build

使用live server或者直接在浏览器打开index.html文件即可

四、Vue2或Vue3中安装

使用npm安装talwindcss postcss autoprefixer, 生成tailwind.config.js 和 postcss.config.js 文件

Vue3

☘️ 1. 安装talwindcss postcss autoprefixer

npm install tailwindcss postcss autoprefixer -D

☘️ 2. 生成tailwind.config.js 和 postcss.config.js

npx tailwindcss init -p

⚠️ 注意: 由于最新的tailwind css使用post css 8版本，vue2框架暂时还不支持，所以需要指定安装postcss7的版本.1

Vue2

☘️ 1. 安装talwindcss postcss autoprefixer

npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 -D

☘️ 2. 生成tailwind.config.js 和 postcss.config.js

npx tailwindcss init -p

☘️ 3. 设置tailwind.config.js, 将所有模板文件路径放进去

tailwind.config.js

// tailwind.config.js
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

tailwind.config.ts

import type { Config } from "tailwindcss";

export default {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {}
  },
  plugins: []
} satisfies Config;

☘️ 4. 在src/main.js中引入tailwind