TailwindCss的vue3安装使用

按照官网的安装教程，属性最后无法生效，这是自我改良版，添加了额外步骤，但是每次引入新的tailwindcss属性 需要重新跑一次项目

npm下载tailwindcss

npm install -D tailwindcss

npx初始化tailwind配置

npx tailwindcss init

此时根目录会出现tailwind.config.js，对其复制以下内容：

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

然后src中的主css文件input.css(没有就创造)通过@tailwind指令引用：

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

在终端运行tailwind CIL

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

在根目录的index.html引用link生成的output.css

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

接下来就可以随意使用tailwindcss：

<template> <div class="text-3xl "> 213 </div> <div class="text-3xl font-bold underline"> 213 </div> <h1 class="text-3xl font-bold underline"> Hello world! </h1> <h1 class="underline font-serif"> Hwllo world! </h1> </template> 官方是这样写的 实际无法生效

我去查了下 还需要在package.json中配置构造指令：

{ "scripts": { // ... existing scripts ... "tailwind": "npx tailwindcss -i ./src/input.css -o ./src/output.css --watch" } }

如果index.html处在根目录中，或者用vue开发项目，或者使用了ts，还需要对tailwind.config进行修改：

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

然后再次运行项目：

npm run project-name

或者直接运行如下指令：

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