bg-black--tw-bg-opacity: 1; background-color: rgba(0, 0, 0, var(--tw-bg-opacity)); bg-white--tw-bg-opacity: 1; background-color: rgba(255, 255, 255, var(--tw-bg-opacity)); bg-gray-50--tw-bg-opacity: 1; background-color: rgba(249, 250, 251, var(--tw-bg-opacity)...
我使用NPM在我的react应用程序中安装了顺风,其方式如下: npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p 然后,我还以以下方式编辑了我的tailwind.config.js文件: module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}", ], theme: { extend: {}, }, plugins: [...
可以和 group 和 peer 配合使用,<svg class="group-aria-[sort=ascending]:rotate-0>标识父组件具有aria-sort=ascending属性时 svg 的样式 You can customize which aria-* modifiers are available by editing theme.aria or theme.extend.aria in your tailwind.config.js file 可以在配置中为[]内内容配置快捷...
.button { background-color: rgba(247, 186, 30, 0.6); } .tab { background-color: rgba(247, 186, 30, 0.6); } 后期我们想要更改项目的颜色方案,我们需要找到此颜色的每个实例并在「所有地方」进行更新。对所有实例进行手动替换,这是一步耗时且充满危险的举动,你可能会误伤其他的变量,又或者遗漏部分变...
// tailwind.config.js module.exports = { ... theme: { extend: { colors: { theme: 'white dark:black' } } } ... } 很遗憾,dark:毕竟是类名而不是颜色值,因此tailwind并不支持这样的写法。 但是!Tailwind是支持CSS变量的。比如你可以写成 ...
首先我们要做的第一件事情，是在官方文档中，找到background color对应的缩写是什么 然后在 extend 字段...
首先我们要做的第一件事情,是在官方文档中,找到background color对应的缩写是什么 然后在 extend 字段中,对应的字段里,配置自定义的语法,heise. 代码语言:javascript 复制 theme:{extend:{backgroundColor:{heise:{0:'rgba(0, 0, 0, 0)',1:'rgba(0, 0, 0, 0.1)',2:'rgba(0, 0, 0, 0.2)',3:...
extend: {}, }, plugins: [], } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 3. 在项目 css 中引入 tailwind 指令 我们在项目的主css入口,引入如下的指令。 @tailwind base; @tailwind components; @tailwind utilities; 1. 2. 3. 在Vite项目中,我们一般以./src/index.css作为主css。当然,我们可以安...
{"2xl":"1400px", }, }, extend: { colors: { border:"hsl(var(--border))", input:"hsl(var(--input))", ring:"hsl(var(--ring))", background:"hsl(var(--background))", foreground:"hsl(var(--foreground))", primary: {DEFAULT:"hsl(var(--primary))", foreground:"hsl(var(--...
module.exports= {content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],theme: {extend: {colors: {red:"#1fb6ff",custom:"#f3f4f6", }, }, },plugins: [], }; 14. 样式复用 @layer @apply Tailwind 三大层级: base: 基础层级,定义一些基础属性如 margin、padding 等 ...