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

相关推荐
落笔画忧愁e2 小时前
数据通信学习笔记之OSPF其他内容1
笔记·学习
GHL2842710902 小时前
mysql学习-B+树相关问题
b树·学习·mysql
中草药z3 小时前
【RabbitMQ高级特性】消息确认机制、持久化、发送方确认、TTL和死信队列
java·学习·rabbitmq·java-rabbitmq·持久化·高级特性
云上艺旅3 小时前
K8S学习之基础四十六:k8s中部署Kibana
学习·云原生·容器·kubernetes
weixin_502539853 小时前
rust学习笔记18-迭代器
笔记·学习·rust
GoldenaArcher3 小时前
lodash 学习笔记/使用心得
javascript·笔记·学习
XYN614 小时前
【嵌入式学习2】内存管理
c语言·开发语言·jvm·笔记·嵌入式硬件·学习
大白的编程日记.5 小时前
【Linux学习笔记】gcc编辑器和动静态库的深度剖析
linux·笔记·学习
傍晚冰川6 小时前
【江协科技STM32】Unix时间戳(学习笔记)
科技·stm32·单片机·嵌入式硬件·学习·实时音视频·unix
云上艺旅6 小时前
K8S学习之基础四十一:Prometheus基于Pushgateway采集数据
学习·云原生·容器·kubernetes·prometheus