tailwindcss配置工作

最新推荐文章于 2025-04-01 21:56:48 发布

是谁住在深海的大菠萝里！

最新推荐文章于 2025-04-01 21:56:48 发布

阅读量303

点赞数 3

分类专栏： tailwindcss 文章标签：前端

本文链接：https://blog.csdn.net/weixin_53777282/article/details/138628785

版权

tailwindcss 专栏收录该内容

3 篇文章

订阅专栏

安装tailwindcss

通过 npm 安装 tailwindcss，并创建你的 tailwind.config.js 文件。

npm install -D tailwindcss
npx tailwindcss init

配置模板路径

在 tailwind.config.js 文件中添加所有模板文件的路径。

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

将tailwindcss指令添加到css中

将每个 Tailwind 层的 @tailwind 指令添加到你的主 CSS 文件中。

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

启动tailwindcss CLI构建进程

运行 CLI 工具以扫描模板文件中的类并构建 CSS。

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

开始在HTML中使用tailwindcss

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>