【tailwind 3.0】如何开始使用Tailwind CSS新建一个项目
1年前
超过396天
温馨提示
本文最后更新于2023年08月21日，已超过396天没有更新，若内容或图片失效，请留言反馈。
tailwindcss 3.0已经正式发布。安装方式也有一些改变。此贴将对3.0的安装方式做一些说明。
安装 Tailwind CSS
tailwindcss 通过 npm 安装，并创建您的 tailwind.config.js 文件。
npm install -D tailwindcss
npx tailwindcss init
配置您的模板路径
在 tailwind.config.js 文件中添加所有模板文件的路径。
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
将 Tailwind 指令添加到您的 CSS
创建一个css文件，位置随意，比如src/main.css,并且将内容修改为如下：
@tailwind base;
@tailwind components;
@tailwind utilities;
开始在您的 HTML 中使用 Tailwind
将已编译的 CSS 文件添加到
并开始使用 Tailwind 来设置您的内容样式。<!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">
Hello world!
</h1>
</body>
</html>
创建构建命令
运行以下命令
npm init -y
现在打开 package.json 文件，添加以下运行脚本：
"scripts": {
"build": "tailwindcss -i ./src/main.css -o ./dist/output.css --watch"
}
这时候只要运行npm run build就可以自动监听你的页面改动并且实时编译了。
自动刷新HTML文件
这是个题外话，不属于Tailwind CSS的范畴，如果你在写静态页面的时候，需要每次修改html页面，浏览器就自动刷新这个页面，那么只需要在vscode内搜索Live Preview并且安装，之后在你需要预览的页面，右键，选择Live Preview：Show Preview即可。
文章来源：https://wyz.xyz/d/306-tailwind-30tailwind-css
none
本作品采用知识共享许可协议知识共享署名-非商业性使用-禁止演绎 3.0 中国大陆许可协议进行许可授权。即要求您在需要转载、引用本文全文或者部分时，请按照协议要求署名，并在保证不进行任何修改、续写等演绎形式，并不用于商业性项目的情况下使用。如果本文有侵犯到您的权益，请直接向我们留言反馈。
0 赞
or 打赏
喜欢就打赏一点
.png "往往免费的还不如收费的")
.png "走失两天的狗子终于找到它的家了")
.png "顶着三十几度的天气去钓鱼了")
.png "\"微博客\"一款自己开发自己用的垃圾源码（慢慢更新中）")
爱老Q笔记官网
1年前 . LV.1
我想要，发到我Q里面吧，哈哈
寻梦xunm
1年前 . LV.0
@爱老Q笔记官网
有空发给你
老Q笔记
1年前 . LV.1
寻梦xunm
1年前 . LV.0
@老Q笔记
偷偷告诉你，这又是一个新主题。以前的付费用户可以免费联系我索要。