tailwind + daisyui 开发初始化

HHTjim 部落格

发布于 2022-10-31 17:20:04

9550

发布于 2022-10-31 17:20:04

文章被收录于专栏：HHTjim'S 部落格 HHTjim'S 部落格HHTjim'S 部落格

创建项目和容器镜像

基于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>