tailwind + daisyui 开发初始化
作者：matrix 发布时间：2022-10-18 分类：零零星星
环境：
Mac + vscode + docker
创建项目和容器镜像
基于nodejs的docker镜像安装tailwindcss，daisyui
新建目录tailwind-project
$ mkdir -p ./tailwind-project/src/ ./tailwind-project/dist/
$ cd ./tailwind-project/
$ docker run -it --rm -v $(pwd):/data -w /data node:latest sh -c 'npm install -D tailwindcss tailwindcss-cli ;npm i daisyui;npx tailwindcss-cli init;bash'
install -D 参数表示dev
daisyUI为组件库 可取消
显示「Created Tailwind css config file: tailwind.config.js」 即创建成功
安装成功的npm包：
root@4e27e6ae691b:/data# npm list
data@ /data
+-- daisyui@2.31.0
+-- tailwindcss-cli@0.1.2
`-- tailwindcss@3.1.8
配置tailwind.config.js
找到tailwind-project目录的tailwind.config.js文件。
参考配置如下：
// 下面配置为tailwindcss 3.0+版本
// 旧版本配置参数名可能不同
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [
require("daisyui"),
],
daisyui: {
themes: ["emerald"],
},
}
content：待监听的html/js/vue文件路径（Tailwind会自动读取使用的class，输出到output css）
plugins：配置加载UI插件daisyui
daisyui.themes : 设置daisyui的默认主题为emerald
热更新监听
使用tailwindcss命令监听html文件变更，自动输出class的css代码到output.css
npx tailwindcss -o ./dist/output.css --minify --watch
-o参数定义output css输出文件路径
--minify参数启用css压缩
--watch参数启用热加载更新文件
编辑你的html
编辑./src/index.html文件，开始尝试tailwind啦...
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HHTjim'S 部落格 - tailwind Demo</title>
<!-- 引入tailwind输出的css文件-->
<link href="/dist/output.css" rel="stylesheet">
</head>
<!-- tailwind watch监听class变化自动更新到output css -->
<body class="bg-[#8ed1fc] h-screen">
<div class="container flex items-center flex-col w-full">
<h2 class="text-4xl text-center my-5 font-bold " >Test Title</h2>
<button class="bg-green-300 hover:bg-green-500 rounded px-2 py-2">Button</button>
</div>
</body>
</html>
vscode插件
tailwindcss官方提供了vscode的开发插件，便于提示class name
https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
tailwindcss用法要多多参考官方手册了，不过有daisyui也可以更快的输出你想要的控件样式
参考：
https://tailwindcss.com/docs/installation
https://daisyui.com/
https://github.com/komavideo/LearnTailwindCSS/tree/main/Lesson02
