普通 html 项目引入 tailwindcss

政哥聊技术-大智汇科技

已于 2025-05-03 11:19:31 修改

阅读量200

点赞数 2

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

于 2025-05-03 11:16:03 首次发布

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/u014617119/article/details/147652990

版权

前端专栏收录该内容

2 篇文章

订阅专栏

项目根目录安装依赖

npm install -D tailwindcss@3 postcss autoprefixer

初始化生成tailwind.config.js

npx tailwindcss init

修改tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html"], //根据自己的项目写
  theme: {
    extend: {},
  },
  plugins: [],
}

package.json 增加如下代码

  "scripts": {
    "build": "npx tailwindcss build styles.css -o output.css"
  }

最终效果

{
  "devDependencies": {
    "autoprefixer": "^10.4.21",
    "postcss": "^8.5.3",
    "tailwindcss": "^3.4.17"
  },
  "scripts": {
    "build": "npx tailwindcss build styles.css -o output.css"
  }
}

执行命令生成 css

npm run build
或者
npx tailwindcss -i ./styles.css -o ./output.css --watch

html 引入 css

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
 
    <!-- 引入 tailwind -->
    <link rel="stylesheet" href="/output.css" />
  </head>

  <body>

   </body>
</html>