要使用lg-px-4这个类名,首先需要在HTML文件中引入tailwindCss的样式文件。可以通过以下方式引入: 代码语言:txt 复制 接下来,在HTML文件中的元素上添加lg-px-4类名即可应用对应的样式。这个类名由三部分组成:lg、px和4。 lg表示这个样式在大屏幕(large)上生效。tailwindCss提供了一套响应式设计的类名,可以根据...
(3)m-4 rounded-md bg-red-500 px-4 py-2 text-white hover:bg-red-600 active:bg-red-400 sm:bg-indigo-500 sm:hover:bg-indigo-600 sm:active:bg-indigo-400 页面每到一定大小就出现一种效果,hover选中状态,active被激活(点击时),lg、sm都是窗口大小程度(到了就运行效果) 2.聚焦ring-green-500 ...
我们的导航条包含logo和下拉按钮,点击按钮后会出现下拉选项。 静态元素及格式 起步仍然是先把元素(header/div/img/button/svg)摆上,整体保持flex,并且对齐,留足空间,对于按钮的互动变化也分别设置好。 <svgclass="fill-current text-white h-8 w-8"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 20 2...
function App() { return (<svgclassName="h-5 w-5 mr-3 animate-spin"viewBox="0 0 24 24"><circlecx="12"cy="12"r="10"stroke="currentColor"strokeWidth="4"fill="none"/><pathfill="currentColor"d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0...
根据需要选择其他的功能插件,例如:Babel, Router, Vuex, CSS Pre-processors, Linter。
--breakpoint-3xl:1920px; --color-neon-pink:oklch(71.7%0.25360); --color-neon-lime:oklch(91.5%0.258129); --color-neon-cyan:oklch(91.3%0.139195.8); } 特殊的@theme指令告诉 Tailwind CSS 根据这些变量提供新的实用程序和变体,让您可以在标记中使用类似3xl:text-neon-lime的类: ...
--breakpoint-4xl: 1920px; --color-neon-pink: oklch(71.7% 0.25 360); --color-neon-lime: oklch(91.5% 0.258 129); --color-neon-cyan: oklch(91.3% 0.139 195.8); } 1. 2. 3. 4. 5. 6. 7. 8. 9. 特殊的@theme指令告诉 Tailwind 根据这些变量提供新的实用程序和变体,让你可以在标记中...
--breakpoint-4xl: 1920px; --color-neon-pink: oklch(71.7% 0.25 360); --color-neon-lime: oklch(91.5% 0.258 129); --color-neon-cyan: oklch(91.3% 0.139 195.8); } 特殊的@theme指令告诉 Tailwind 根据这些变量提供新的实用程序和变体,让你可以在标记中使用类似4xl:text-neon-lime的类: ...
Tailwind为宽度设置提供了不同单位形式的工具类,主要分为4种类型 自动宽度 固定宽度 弹性宽度 视口宽度 自动宽度(auto) Tailwind使用.w-auto工具类让浏览器根据元素内容自动计算其宽度,为元素的默认宽度。 .w-auto{width:auto;} 固定宽度(number) 固定宽度主要使用.w-{number}和.w-px两种类型,其中number为rem相对...
4. 5. 在html 里指定 class,然后在 css 里定义这个 class 的样式。 也就是 class 里包含多个样式: 而原子化 css 是这样的写法: 1. .text-base { font-size: 16px; } .p-1 { padding: 4px; } .border { border-width: 1px; } .border...