边框颜色:border border-[color]-[shade] border:添加边框 间隔颜色:divide-[direct] divide-[color]-[shade] divide-[direct]:添加分隔,direct 表示分隔方向,取值 x-横向、y-纵向 Item 1 Item 2 Item 3 轮廓线颜色:outline outline-[color]-[shade] outline:添加轮廓线 OlColor Default ...
Border Colors By default Tailwind makes the entiredefault color paletteavailable as border colors. You cancustomize your color paletteby editing thetheme.colorssection of yourtailwind.config.jsfile, or customize just your border colors using thetheme.borderColorsection. ...
在本例中,我们添加了三种自定义颜色:品牌主色、品牌次色和品牌中心色。 这些颜色现在可以与 bg-brand-primary、text-brand-secondary、border-brand-accent 等实用工具类一起使用。您还可以修改现有色调,或在默认调色板中添加新的色调: // tailwind.config.js module.exports ={ theme:{ extend:{ colors:{ blue...
We can also apply these colors to other areas in our webpage such as border color, ring color, placeholder color, and more. We wil go over those other properties in a future section, but for now, this was just a basic introduction into applying colors to your elements using TailwindCSS....
The entire color palette is available across all color related utilities, including things like background color, border color, fill, caret color, and many more. Working with colors Using color utilities Use color utilities like bg-white, border-pink-300, and text-gray-950 to set the different...
{ gray: colors.gray, blue: colors.blue, blueGray: colors.blueGray, green: colors.green, yellow: colors.yellow, orange: colors.orange, red: colors.red, }, }, backgroundColor: { white: 'var(--color-bg-white)', main: 'var(--color-bg-main)', input: 'var(--color-bg-input)', ...
// tailwind.config.jsmodule.exports={// 配置 JIT 模式mode:'jit',// 配置 purgecontent:['./src/**/*.{js,jsx,ts,tsx,vue}','./public/index.html',],// 配置主题theme:{extend:{// 自定义断点screens:{'xs':'475px',},// 自定义颜色colors:{primary:{50:'#f8fafc',// ... 其他色阶...
它们的工作方式border实用程序非常相似，不同之处在于它们添加了实心的阴影而不是边框，因此不会影响布局：<!-- ... --> 您甚至可以使用ring-offset-{width}实用程序抵消它们以创建某种光环效果：<!-- ... --> 使用一堆CSS自定义属性voodoo，我们甚至还使它们自动与常规的盒子阴影结合在一起：<!-- Both th...
By default, these colors are automatically shared by all color-driven utilities, like textColor, backgroundColor, borderColor, and more. Color object syntax You can see above that we’ve defined our colors using a nested object notation where the nested keys are added to the base color name ...
// tailwind.config.jsmodule.exports={theme:{colors:{gray:colors.coolGray,blue:colors.lightBlue,red:colors.rose,pink:colors.fuchsia,},fontFamily:{sans:['Graphik','sans-serif'],serif:['Merriweather','serif'],},extend:{spacing:{'128':'32rem','144':'36rem',},borderRadius:{'4xl':'2rem...