tailwindcss学习01

系列教程

01 入门
02 vue中接入

入门

bash 复制代码
# 注意使用cmd不要powershell
npm init -y
# 如果没有npx则安装
npm install -g npx
npm install -D [email protected] --registry http://registry.npm.taobao.org
npx tailwindcss init

修改tailwind.config.js

js 复制代码
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

新建src文件夹,该文件夹下新建input.css

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

执行监听

bash 复制代码
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

src下新建index.html

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="./output.css" rel="stylesheet">
</head>
<body>
    <h1 class="text-3xl font-bold underline">
        Hello world!
      </h1>
</body>
</html>

参考

https://www.tailwindcss.cn/docs/installation

相关推荐
Non importa2 小时前
【初阶数据结构】树——二叉树(上)
c语言·数据结构·学习·算法
Rousson3 小时前
硬件学习笔记--57 MCU相关资源介绍
笔记·单片机·mcu·学习
h汉堡4 小时前
C++入门基础
开发语言·c++·学习
小斌的Debug日记5 小时前
SpringBoot和微服务学习记录Day3
spring boot·学习·微服务
路有瑶台5 小时前
EXCEL学习
学习·excel
计算机视觉与OpenCV5 小时前
自动驾驶与机器人算法学习
学习·机器人·自动驾驶
筱小虾米5 小时前
Dify忘记管理员密码,重置的问题
人工智能·学习·dify
FAREWELL000755 小时前
C#进阶学习(九)委托的介绍
开发语言·学习·c#·委托
我的代码永没有bug6 小时前
day1-小白学习JAVA---JDK安装和环境变量配置(mac版)
java·学习·macos
浅浅2807 小时前
numpy、pandas内存优化操作整理
数据结构·经验分享·python·学习·性能优化·numpy·pandas