html项目使用tailwind

最新推荐文章于 2024-05-06 21:31:15 发布

Byebye_W0rld

最新推荐文章于 2024-05-06 21:31:15 发布

阅读量945

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/Byebye_W0rld/article/details/127587766

版权

第一步：安装 Tailwind CSS：

npm install -D tailwindcss (安装tailwindcss)

npx tailwindcss init  (初始化会生成 tailwind.config.js 配置文件)

第二步：编辑 tailwind.config.js 配置文件

添加文件到配置文件中

module.exports = {
 content: ["./src/**/*.{html,js}"],
 theme: {
   extend: {},
 },
 plugins: [],
}

第三步：添加 Tailwind 样式指令到 CSS文件中

在src文件夹下建一个style.css. 添加以下代码。

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

第四步：使用 Tailwind Cli 构建 CSS样式

npx tailwindcss -i ./src/style.css -o ./dist/mystyle.css --watch

该命令会将 src/style.css 中 Tailwind CSS 编译到 demo/dist/mystyle.css 文件中，mystyle.css 就是编译后样式，项目中引入的就是它。

现在打开 package.json 文件，添加以下运行脚本：

"scripts": {
  "build": "tailwindcss -i ./src/style.css -o ./dist/output.css --watch"
}

第五步：在html中使用

<!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 text-yellow-100">
   Hello world!
 </h1>
</body>
</html>

最后npm run build。

原地址：https://blog.csdn.net/DSelegent/article/details/126363910?spm=1001.2101.3001.6650.17&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-17-126363910-blog-115641854.pc_relevant_3mothn_strategy_recovery&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-17-126363910-blog-115641854.pc_relevant_3mothn_strategy_recovery&utm_relevant_index=18