input:foucs { border: 1px solid blue; } input:hover { border: 1px solid red; } 引入Tailwind之后,就可以这么写了 亮点四:深色模式 今年做项目,接连遇到了两个主题切换的需求,看来网站能够适配不同的主题已经是流行的趋势了。Tailwind也抓住了这一点,让我们能轻松实现深色模式下的网站的样式。 首先在ta...
border: '1px solid', borderRadius: '4px', borderColor: theme('colors.red.400'), ...
在调试传统CSS时,我经常使用红色边框突出显示页面上的某个元素:border: 1px solid red。在尾风中,一次又一次地键入类似className="border-2 border-solid border-red"的内容非常麻烦。我宁愿写一些类似className="debug"的东西。像这样的速记在尾风里有可能吗? 浏览7提问于2022-10-05得票数0 回答已采纳 2回答 ...
在调试传统CSS时,我经常使用红色边框突出显示页面上的某个元素:border: 1px solid red。在尾风中,一次又一次地键入类似className="border-2 border-solid border-red"的内容非常麻烦。我宁愿写一些类似className="debug"的东西。像这样的速记在尾风里有可能吗? 浏览7提问于2022-10-05得票数 0 回答已采纳 1回答...
.border:默认边框宽度为 1px .border-0:没有边框 .border-2:边框宽度为 2px .border-4:边框宽度为 4px 同样的规则适用于特定方向的边框宽度,如上边框宽度.border-t-2, 下边框宽度.border-b-2, 等等。 如果需要自定义边框宽度,你可以使用.border-{value},其中{value}是你自己定义的像素值。
Tailwind CSS结合了 postcss,将基础的 css 全部拆分为原子级别,同时还补全各种浏览器模式前缀,兼容性更好。例如:border: 1px solid #eee;拆分为:border-width、border-style、border-color 而且还支持根据自己设计稿定义契合自己项目的 csss 原子,这点真的很棒。
border: 1px solid #34D399; background-color: transparent; border-radius: 0.375rem; padding: 0.5rem 1.5rem; color: #34D399; line-height: 1; cursor: pointer; text-decoration: none; transition: background-color 300ms, color 300ms;
Tailwind CSS结合了 postcss,将基础的 css 全部拆分为原子级别,同时还补全各种浏览器模式前缀,兼容性更好。例如:border: 1px solid #eee;拆分为:border-width、border-style、border-color 而且还支持根据自己设计稿定义契合自己项目的 csss 原子,这点真的很棒。
border: 1px solid #000; padding: 4px; } 1. 2. 3. 4. 5. 在html 里指定 class,然后在 css 里定义这个 class 的样式。 也就是 class 里包含多个样式: 而原子化 css 是这样的写法: 1. .text-base { font-size: 16px; } .p-1 { padding: 4px; } ....
1.设置边框宽度,如果不写数值,默认是 1px border-t-数值 :border-top-width; border-r-数值 :border-right-width; border-b-数值 :border-bottom-width; border-l-数值 :border-left-width; border-x-数值 :border-left-width; border-right-width; ...