Text shadow x and y modifiers The shadow can be moved on the xy axis using .text-shadow-x-{value} and .text-shadow-y-{value} Hello, Tailwind CSS! Text shadow color modifier Hello, Tailwind CSS! In the example above, the element will have a red text shadow with an x offset of ...
文本颜色:text-[color]-[shade] color:颜色名称 shade:色度,取值范围为 100~900,不可对黑色或白色使用 Color Black Color White Color Red 500 Color Blue 500 Color Gray 500 Color Green 500 背景颜色:bg-[color]-[shade] BgColor White BgColor Red 500 BgColor Black 下划线颜色:underline decoration...
text-{color}:设置文字颜色。 uppercase, lowercase, capitalize:转换文本大小写。 举例说明: Styled text Tailwind Colors Tailwind CSS 提供了可自定义的默认调色板。颜色由颜色名称和阴影组合而成。 bg-{color}-{shade}:设置背景颜色。 text-{color}-{shade}:设置文本颜色。 border-{color}-{shade}:设置边...
placeholder-gray-400实际的类名全程为.placeholder-pink-400::placeholder表示文本占位符的颜色color: #f687b3;。 带边框 带边框取消了阴影shadow取而代之的是border,适合在纯色背景中使用。 白底带边框 输入框尺寸 input size
tailwindcss-text-border A tailwindcss plugin to enable text borders based on text-shadow property tailwindcss tailwind postcss text-border silveltman •1.0.4•2 years ago•0dependents•ISCpublished version1.0.4,2 years ago0dependentslicensed under $ISC ...
shadow-sm: 小型阴影、shadow: 中等阴影、shadow-md: 中等阴影(与 shadow 相同)、shadow-lg: 大型阴影、shadow-xl: 超大型阴影、shadow-2xl: 超超大型阴影、shadow-inner: 内部阴影、shadow-none: 无阴影 二、效果方法 1.自适应显示 (1)invisible sm:visible md:text-red-500 lg:text-8xl, ...
Tailwind 使用dark变量来定义深色样式(默认浅色),默认情况下,是使用 CSS 媒体查询prefers-color-scheme来识别系统模式并展示具体样式,示例代码:
-- 深色模式切换按钮 --><!-- 亮色模式图标 --><svgclass="w-5 h-5 hidden dark:block"fill="currentColor"viewBox="0 0 20 20"><pathd="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-....
彩色阴影使得我们可以在彩色背景上添加辉光、反射效果和更自然的阴影。可以使用shadow-{color}更改阴影的颜色。默认情况下,彩色阴影的不透明度为100%,但可以使用“opacity”修饰符进行更改。请参阅以下代码片段,了解如何使用彩色阴影。 <!-- Utilities used: shadow-blue-500/50 -->Subscribe<!-- Utilities used: ...
现在颜色的CSS变量使用 --tw-shadow-color: rgb(6 182 212/0.5); 来表示了,写法就是 shadow-cyan-500/50 前面代表使用的颜色,后面代表透明度,还是很方便的。 Scroll snap API 这个是和更加精准的操控滚动体验有关的,笔者不是很懂,实际在项目中也没用过。 文字排版 这个columns 是一个CSS的排版属性,它作...