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

相关推荐
nuc-12722 分钟前
sqli-labs学习记录8
数据库·学习·sqli-labs
士别三日&&当刮目相看1 小时前
JAVA学习*简单的代理模式
java·学习·代理模式
今夜有雨.1 小时前
HTTP---基础知识
服务器·网络·后端·网络协议·学习·tcp/ip·http
长流小哥3 小时前
Qt 动画学习 入门Qt,怎能少了学动画!
开发语言·qt·学习
虾球xz3 小时前
游戏引擎学习第189天
学习·信息可视化·游戏引擎
泽5531803 小时前
java学习
学习
每次的天空3 小时前
Android Jetpack学习总结(源码级理解)
android·学习·android jetpack
洁白的郁金香5 小时前
HCIP-6 DHCP
网络·学习
lemon3106245 小时前
dockerfile制作镜像
linux·运维·服务器·学习