@screen @screen指令允许您创建通过名称引用断点的媒体查询,而不是在您的 CSS 中复制他们的值。 例如,假设有一个名为sm的640px的断点,您只需要写一些自定义的指向这个断点的 CSS。 而不是编写一个复制那些值的原始的媒体查询,如下所示: @media(min-width:640px){/* ... */} ...
高度类:如h-screen(高度为屏幕高度)、h-16(高度为16像素)、min-h-full(最小高度为100%)等。 文本类 文本颜色类:如text-red-500(文本颜色为红色500)、text-black(文本颜色为黑色)等。 文本大小类:如text-xl(文本大小为大号字体)、text-sm(文本大小为小号字体)等。 字体粗细类:如font-bold(使用粗体字体)...
}@mediascreenand(min-width:1280px) {#app{font-size:30px; } } Tailwind CSS 如何实现响应式 在Tailwind 中,不需要写复杂的媒体查询声明代码,通过断点前缀:类名的形式,就能定义元素的响应式 Tailwind 默认断点 sm:640px md:768px lg:1024px xl:1280px 2xl:1536px sm:bg-red-300 => 应用于大于 640px...
取而代之的是,使用常规的媒体查询和theme()函数来引用您的屏幕尺寸,或者干脆不要嵌套您的@screen指令。 使用常规的媒体查询和 theme() .card{@applyrounded-none;@media(min-width:theme('screens.sm')){@applyrounded-lg;}} {/ Use the @screen directive at the top-level /} 在顶层使用 @screen 指令 ...
@screen指令允许你通过名字来创建媒体查询,而不用非得在自己的CSS里面复制他们的值。 例如,假设你在 640px 处有个sm断点,而且你现在要根据这个断点写一些自定义CSS语句来,就不用像下边这样写个复制断点值的原生媒体查询: @media(min-width:640px){/* ... */} ...
@media only screen and (max-width: 760px) { .content { width:128px; } } 在Tailwind CSS 中表述如下: 使用技巧 选择数字标签而不是语义标签 TailwindCss 具有较好的语义化,但使用默认的命名方案,会大大增加开发者的记忆成本,例如:字体粗细值从 thin(100) 定义到了 black(900)。 使用数字标签的方式可...
screens: {'sm':'640px',//=> @media (min-width:640px) { ... }'md':'768px',//=> @media (min-width:768px) { ... }'lg':'1024px',//=> @media (min-width:1024px) { ... }'xl':'1280px',//=> @media (min-width:1280px) { ... }'2xl':'1536px'// => @media ...
To override a single screen size (likelg), add your customscreensvalue under thetheme.extendkey: tailwind.config.js /**@type{import('tailwindcss').Config}*/module.exports={theme:{extend:{screens:{'lg':'992px',// => @media (min-width: 992px) { ... }},},},} ...
@media screen and (max-width: 1024px){ margin: 0.25rem } 只需要 lg:m-1（响应式）:focus ...
@screen 生成指定响应断点的变体 @screen sm{.bg-color{background:orange;}}// 生成代码@media(min-width:640px){.sm:bg-color{background:orange;}} 该指定只为指定的断点,生成样式类 @theme() 获取主题样式 .content-area{height:calc(100vh -theme('spacing.12'));} ...