0x01 概述 (1)简介 Tailwind CSS 官网:https://www.tailwindcss.cn/ Tailwind CSS 是一个 CSS 框架,使用初级“工具”类创建布局 如 Bootstrap 等传统 CSS 框架,其使用的类通常与组件直接相关;然而,Tailwind 则采用了
initial-scale=1.0"><title>Tailwind 示例</title><linkhref="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css"rel="stylesheet"></head><body><divclass="container mx-auto p-6"><buttonclass="bg-blue-500 text-white px-4 py-2 rounded">点击我</button><divclass...
<link rel='stylesheet' href='style.css' /> </head> <body> <div><h1 class='bg-blue'>Hello world!</h1></div> </body> </html> 效果如下: # ON 我们可以编写这种单一用途的 CSS 规则并将它们全部保存在全局 CSS 文件中。这样就可以在任何地方使用这些单一用途的实用程序类。只需要在 HTML 中...
这个 TailwindCSS 掀起了 CSS 属性原子化的热潮以后，跟风的很多，像 ChakraUI 也自己造了一套轮子，但...
伪类选择器: hover, focus, active 子选择器: first, last, even, odd 父状态选择器: group<- tailwindcss 特有 伪元素: before, after ! important修改器 案例1:hover:bg-sky-500当 hover 时应用此类名 <divclass="hover:bg-sky-500 w-[200px] h-[200px] bg-black text-white transition-bg durati...
下面是一个简单的示例,展示了如何使用TailwindCSS来创建一个基本的页面布局: <!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>TailwindCSS 示例</title><linkhref="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19...
tailwindcss 3.3.3(完成入门,需要补充每个单独样式) 归纳 修饰符堆叠 <button class="dark:md:hover:bg-fuchsia-600"> 以下为修饰符 伪类伪元素 使用方法: 在实用程序类前添加hover:bg-sky-700 伪类 hover focus focus-within 用来选择和样式化一个元素或者它的任何后代元素获得焦点的情况...
DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>MyBlog</title><linkrel="stylesheet"href="./dist/output.css"></head><body><navclass="bg-white shadow-md"><divclass="max-w-6xl mx-auto px-4"><divclass="flex items-center justify-between"><divclass="flex items-...
原子CSS(Atomic CSS)是一种CSS 架构方法,旨在通过使用单一的、独立的类来构建样式,从而提供可重用且高度可组合的样式规则。 例如,使用以下 CSS 创建一个 bg-blue 类: .bg-blue {background-color: rgb(81, 191, 255);} 如果将此类添加到 标签中,它将获得蓝色背景,颜色如上面代码rgb(81, 191, 255)所示。
6 <title>Document</title> 7 <link rel="stylesheet" href="/build.css"> 8 </head> 9 <body> 10 <button class=""></button> 11 </body> 12 </html> 13 build.css 1 Terminal npx tailwindcss --output build.css --content index.html --watch ...