tailwindcss学习01

互联网
2025-08-30 04:42:01

系列教程

01 入门 02 vue中接入

入门 # 注意使用cmd不要powershell npm init -y # 如果没有npx则安装 npm install -g npx npm install -D tailwindcss@3.4.17 --registry http://registry.npm.taobao.org npx tailwindcss init

修改tailwind.config.js

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

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

@tailwind base; @tailwind components; @tailwind utilities;

执行监听

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

src下新建index.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>

参考

.tailwindcss /docs/installation

标签：

tailwindcss学习01由讯客互联互联网栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“tailwindcss学习01”

上一篇
AI领域技术架构

下一篇
如何写出优秀的测试用例？