如何使用带有响应变量的自定义类
如何使用带有响应变量的自定义类
提问于 2022-03-21 16:57:45
我正在为我公司的下一个中型前端开发挑选技术栈。
我(现在)选择了: Angular，Tailwindcss，PrimeNg和PrimeIcons。
现在，我开始适应这些技术，或者用这些技术更新我的知识。一切都进展顺利，除了一件事，我不能用顺风来纠正。PrimeNg的组件有类，如p-inputtext-sm或p-inputtext-lg，我想根据顺风的响应变体来设置这些类。
类似于：
<input pInputText type="text" id="username" formControlName="username" class="w-full p-inputtext-sm lg:p-inputtext-lg">有可能吗？
回答 2
Stack Overflow用户
发布于 2022-03-22 18:07:42
正如Maik Lowrey所说，这就是组件的用途。但是您可以创建任意数量的组件。
@layer components {
.component-lg {
@apply bg-red-500 text-3xl;
}
.component-sm {
@apply bg-green-500 text-sm;
}
}组件层下的每个类都可以与响应变量一起使用(即使是container -您可以像lg:container一样尝试它)。
<div class="text-white p-4 component-sm sm:component-lg">
Hello World
</div>或者您可以使用CSS in JS语法创建插件。
// tailwind.config.js
const plugin = require('tailwindcss/plugin')
module.exports = {
theme: {
extend: {
// ...
},
},
plugins: [
plugin(function ({ addComponents, theme }) {
addComponents({
'.component-plugin': {
backgroundColor: theme('colors.amber.500'),
fontSize: theme('fontSize.6xl'),
},
})
}),
],
}这两种方法基本上都是一样的，但是使用插件，您可以创建软件包，并在每次需要时安装它。
<div class="text-white p-4 component-sm sm:component-lg md:component-plugin">
Hello World
</div>Stack Overflow用户
发布于 2022-03-22 09:49:13
您必须为组件分配一个新的层。在此组件中，您可以定义类并添加顺风类。您可以使用顺风屏幕指令使您的自定义类负责。
在您输入顺风css类的css文件中添加以下内容：
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.p-inputtext {
@apply lg:bg-red-500 md:bg-green-500 sm:bg-blue-500 text-2xl lg:text-4xl;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71561324
复制相关文章
相似问题
腾讯云开发者
