(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 ...
.button { @apply bg-blue-600 text-white px-4 py-2 rounded; } 从功能上来说,使用 @apply 生成新的功能类,会产生多余的 css,我们应尽量不使用它,这与 TailwindCss 设计背道而驰。 使用Tailwind 制作一个基础按钮 button 响应式布局 Tailwind 中的每个实用程序类都可以在不同的断点处有条件地应用,...
Tailwind其实是一个非常渐进式的设计理念与框架，他根本就可以不和现有框架冲突并且可以无缝的渐进式融入现...
-- Using form state modifiers, the classes can be identical for every input --><!-- ... --> 基于父状态的样式 需要给父组件标记一个group
Start Ticketing 虽然Tailwind CSS 也支持把很多属性提取成一个组件,但是对于不会再次复用的 class。提取组件也没什么必要。 所以类名很多是我目前遇到的不太舒服的问题。 熟悉使用有成本 这一点逃避不了,所有的新技术,所有的 css 框架都有熟悉成本。Tailwind CSS 也一样...
@apply bg-orange rounded-medium px-[1rem] py-[1.4rem] } 将会把这个样式应用到所有子元素上,而不需要重复。因此我们在 Tailwind 类中用 Arbitrary value 用法实现它: *]:rounded-medium [&>*]:bg-orange [&>*]:px-[1rem] [&>*]:py-[1.4rem]"> catland 32 apartment 69 cat’s station ...
有人说它类名科学易记，但是，根本就不该有类名，就应该inline写法。没有样式复用这回事，该复用的是...
font-size: 14px; border-radius: 2px; color: #fff; border-color: #ff4d4f; background: #ff4d4f; text-shadow: 0 -1px 0 rgb(0 0 0 / 12%); box-shadow: 0 2px #0000000b; } 以上是最常见、最常规的写法,被称作Semantic CSS(语义化 CSS)规范。在这种规范下,追求关注点分离,让结构与样式...
<!-- Using utilities -->Button 如果说有比较常用的,这里还能使用@apply指令围绕通用实用程序模式创建抽象,可以轻松解决此问题。 <!-- Extracting classes using @apply -->Button 这样维护起来也比较方便,相比bootstrap等这些框架,显得更加灵活,可操作性更强。 结语 总的来说,Tailwind CSS改变了传统的方式,这样...
Cancel Create saved search Sign in Sign up Reseting focus {{ message }} 3210jr / blog.tailwindcss.com Public forked from tailwindlabs/blog.tailwindcss.com Notifications You must be signed in to change notification settings Fork 0 Star ...