tailwind + daisyui 开发初始化

作者:matrix 发布时间:2022-10-18 分类:零零星星

环境:

Mac + vscode + docker

创建项目和容器镜像

基于nodejs的docker镜像安装tailwindcssdaisyui

新建目录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