原生CSS阶段,需要用到什么样式就写什么样式,也会有一些简单的复用;第二个阶段是将CSS组件化,将具有相同视觉效果的元素封装成同一个组件类,比如07年Twitter推出的Bootstrap框架,后面以及React和Vue等框架涌现出来的Element UI、Antd等各种各样的组件库,都对自身的组件进行了封装,提供相当丰富的预设组件。
@import 'tailwindcss/base'; @import 'tailwindcss/utilities'; 然后在 app.ts 里引入 Q&A: 为什么没有引入 tailwindcss/components? 是因为里面默认存放的是 pc 端自适应相关的样式,对小程序环境来说没有用处。如果你有 @layer components 相关的工具类需要使用,可以引入。 二. 配置 rem 转rpx 前面我们安装...
@layer:用于创建自定义样式 @layer base { h1 { font-size: 2rem; } } @layer components { btn-blue { @apply bg-blue-500 px-4 py-2 rounded-xl font-bold hover:bg-blue-700; } } @config:用于指定 Tailwind 在编译该 CSS 文件时应使用的配置文件 @config "./tailwind.input.config.js"; b...
base: 基础层级,定义一些基础属性如 margin、padding 等 components: 在这个层级创建可复用的样式块,如 card 等 utilities: 工具层级,如 layout、flex、grid 等指定层级,使用已有样式@layer: 指定样式具体在哪一层级, 如 base、component、utilities @apply: 使用 TailwindCSS 现有类名...
@import'tailwindcss/base';@import'tailwindcss/utilities'; 然后在app.ts里引入 Q&A: 为什么没有引入tailwindcss/components? 是因为里面默认存放的是 pc 端自适应相关的样式,对小程序环境来说没有用处。如果你有 @layer components 相关的工具类需要使用,可以引入。
关于重复的Tailwind,有几种处理方式: 代码编辑器的重复选取 使用循环 将需要重复使用的内容提取为组件 通过@layer和@apply关键词,在less文件中声明并达到复用的效果 官方示例 @tailwindbase;@tailwindcomponents;@tailwindutilities;@layercomponents{.btn-primary{@applypy-2px-5bg-violet-500text-white font-semibold ...
@import'tailwindcss/base';@import'tailwindcss/utilities'; 然后在app.ts里引入 Q&A: 为什么没有引入tailwindcss/components? 是因为里面默认存放的是 pc 端自适应相关的样式,对小程序环境来说没有用处。如果你有 @layer components 相关的工具类需要使用,可以引入。
如果想在项目内添加自己实现的类，例如如下。这里 tailwind 建议写在主文件(具有tailwind指令的文件)并放在对应的 layer 下，所以需要改成如下。原因是因为css类名都是一级类名，权重相同，只能使用顺序来确保覆盖规则，使用这个指令可以让生成的最终css文件内，article 类名在 utilities之前，这样当我们写...
在main.css 文件添加下面的代码: 代码语言:javascript 复制 @tailwind base;@tailwind components;@layer components{.btn-primary{@apply py-2px-5bg-violet-500text-white font-semibold rounded-full shadow-md hover:bg-violet-700focus:outline-none focus:ring focus:ring-violet-400focus:ring-opacity-75;}}...
在src目录下新建main.css输入以下内容。 @tailwindbase; @tailwindcomponents; @tailwindutilities; 构建CSS #启动 Tailwind CLI 构建过程 npx tailwindcss -i ./src/main.css -o ./src/style.css --watch 运行上面命令以后会在 src 目录生成 style.css 文件,可以观察下文件内容 ...