input: 'var(--color-bg-input)', disable: 'var(--color-bg-disable)', primary: 'var(--color-bg-primary)', hover: 'var(--color-bg-hover)', active: 'var(--color-bg-active)' }, textColor: { white: 'var(--color-text-white)', main: 'var(--color-text-main)', primary: 'var...
相当于理念层面的素材,比如说一个 input 你首先要对它进行拆解边框、字体...等,你需要从框架里把这...
<inputtype="text"class="border"/> <inputtype="text"class="border border-red-500"/> <inputtype="text"class="border border-green-500"/> <input type="text" class="border" /> <input type="text" class="border border-red-500" /> <input type="text" class="border border-green-500" /...
-- 默认插槽 --> <slot></slot> </button></template><style scoped></style> 使用这个组件也很简单,代码如下: <script setup lang="ts">import YwzButton from './components/button/src/YwzButton.vue'</script><template> <div class="button-container flex justify-center my-10"> <YwzButton type...
tailwind.config = { theme: { extend: { colors: { clifford: '#da373d', } } } } </script> <style type="text/tailwindCSS"> @layer utilities { .content-auto { content-visibility: auto; } } </style></head><body> <h1 class="text-3xl font-bold underline text-clifford"> Hello ...
doctype html><html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><scriptsrc="https://cdn.tailwindcss.com/"></script><script>tailwind.config={theme:{extend:{colors:{clifford:'#da373d',}}}</script><styletype="text/tailwindCSS">@layeruti...
1. 方便性:text-center、grid-cols-3 或许一个text-center不足以使你觉得提供了多大的方便性,但对于一个三等分的 Grid 属性来说,一个grid-cols-3和shadow绝对方便 .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } 或者你还能记得box-shadow各个位置的参数吗?我敢保证看这篇文章的...
</style> 这种形式显得 Tailwind 比较割裂,所以在 JIT 模式下,因为支持按需构建,所以这种任意值的形式也可以使用 Tailwind 统一的语法进行书写。 而在v3.0 中,Tailwind 内置了 JIT,无需在配置文件里面声明 JIT 模式,默认就是按需构建、可使用任意辅助类、开发和生产构建方式与产物统一,避免了不一致性、还获得了极大...
中描述样式,内容和样式就有了强耦合。场景、优势、劣势也很明确,这部分和 CSS vs inline style 其实...
<inputtype="text"class="border border-red-500"/> <inputtype="text"class="border border-green-500"/> 间隔颜色:divide-[direct] divide-[color]-[shade] divide-[direct]:添加分隔,direct表示分隔方向,取值x-横向、y-纵向 <divclass="divide-y divide-red-500"> ...