在 html 中使用 tailwindcss

一、为什么学习?

  • 简单
  • 高效
  • 易学

二、环境准备

  • tailwindcss vscode 插件
  • live server 插件

  • windows wsl2 环境

三、初始化项目

sh 复制代码
cd your_dir
pnpm init

根据自己熟悉的 npm 包管理工具初始化项目,此处使用 pnpm。

四、安装依赖

sh 复制代码
pnpm add tailwindcss -D

tailwindcss 在开发阶段开始使用,所以使用 -D

五、创建 tailwindcss 配置文件

sh 复制代码
npx tailwind init --ts

生成 tailwindcss.config.ts 文件,并初始化配置, 初始化之后在 content 字段中添加 ./index.html:

ts 复制代码
import type { Config } from 'tailwindcss'

export default {
  content: ["./index.html"],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config

content 配置了文件之后,每次构建都会读取 index.html 文件中,tailwindcss 的原子类。

六、添加 tailwindcss 指令

css 复制代码
@tailwind base;
@tailwind components;
@tailwind utilities;

配置 css 文件,

七、编译 tailwindcss

  • 添加脚本
ts 复制代码
{
  "scripts": {
    "build": "npx tailwind -w ./src/styles/tailwind.css -o ./dist/tailwind.css"
  }
}
sh 复制代码
pnpm run build

在 dist 目录下,生成 ./dist/tailwind.css 文件。

八、在 html 中使用

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>tailwindcss</title>
  <link rel="stylesheet" href="./dist/tailwind.css">
</head>
<body>
  <div class="flex">This is tailwind css</div>
</body>
</html>

九、启动服务

使用 vs code 中使用 live server 启动 html 服务。

十、快速示例:flex 的水平垂直居中

html 复制代码
<div class="bg-slate-700 h-[200px] text-cyan-400 flex justify-center items-center">
    This is tailwind css
</div>

十一、小结

本文主要介绍基于 html + pnpm 的 tailwindcss 的基础用法,tailwindcss 生态中的 vscode 插件,cli 命令,配置文件配置。

相关推荐
程序员的世界你不懂9 分钟前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技11 分钟前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip19 分钟前
JavaScript二叉树相关概念
前端
rannn_11134 分钟前
【Javaweb学习|实训总结|Week1】html基础,CSS(选择器、常用样式、盒子模型、弹性盒布局、CSS定位、动画),js(基本类型、运算符典例)
css·笔记·学习·html
attitude.x1 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java1 小时前
CSS3核心技术
前端·css·css3
ChinaRainbowSea1 小时前
7. LangChain4j + 记忆缓存详细说明
java·数据库·redis·后端·缓存·langchain·ai编程
舒一笑1 小时前
同步框架与底层消费机制解决方案梳理
后端·程序员
minh_coo1 小时前
Spring框架事件驱动架构核心注解之@EventListener
java·后端·spring·架构·intellij-idea
空山新雨(大队长)1 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5