前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >tailwind + daisyui 开发初始化

tailwind + daisyui 开发初始化

作者头像
HHTjim 部落格
发布2022-10-31 17:20:04
1.1K0
发布2022-10-31 17:20:04
举报
文章被收录于专栏:HHTjim'S 部落格

创建项目和容器镜像

基于nodejs的docker镜像安装tailwindcssdaisyui

新建目录tailwind-project

代码语言:javascript
复制
$ 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包:

代码语言:javascript
复制
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文件。 参考配置如下:

代码语言:javascript
复制
// 下面配置为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文件变更,自动输出classcss代码到output.css

代码语言:javascript
复制
npx tailwindcss -o ./dist/output.css  --minify  --watch

-o参数定义output css输出文件路径

--minify参数启用css压缩

--watch参数启用热加载更新文件

编辑你的html

编辑./src/index.html文件,开始尝试tailwind啦...

代码语言:javascript
复制
<!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

tailwindcss用法要多多参考官方手册了,不过有daisyui也可以更快的输出你想要的控件样式

参考:

https://tailwindcss.com/docs/installation

https://daisyui.com/

https://github.com/komavideo/LearnTailwindCSS/tree/main/Lesson02

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-10-18 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 创建项目和容器镜像
  • 配置tailwind.config.js
  • 热更新监听
  • 编辑你的html
  • vscode插件
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档