临沧永德网站建设电子商务公司百度知道电脑版网页入口

按照官网的安装教程，属性最后无法生效，这是自我改良版，添加了额外步骤，但是每次引入新的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