简洁高效的样式编写：揭秘Tailwind CSS
/* 使用Tailwind CSS创建一个简洁的按钮组件样式 */
/* 定义基础按钮样式 */
.btn {
@apply px-4 py-2 bg-blue-500 text-white font-semibold rounded-lg shadow-md;
}
/* 定义按钮在悬停时的样式 */
.btn:hover {
@apply bg-blue-700;
}
/* 定义按钮在禁用状态下的样式 */
.btn:disabled {
@apply cursor-not-allowed bg-gray-500 opacity-50;
}这个例子展示了如何使用Tailwind CSS的@apply特性来简化CSS代码，并提高样式的可维护性。通过这种方式，开发者可以通过改变一个类来影响所有应用了该类的元素，而不需要在多处重复相同的样式代码。
评论已关闭