React Tailwind 主按钮蓝不起来？轻松调整按钮样式

2024-03-16 13:25:47

在 React Tailwind 中轻松调整按钮样式：打造蓝色主按钮

简介

React Tailwind 是一款功能强大的工具，它将 React 的组件化和 Tailwind 的实用程序类相结合，简化了应用程序的开发和样式设计。然而，有时会出现一些意料之外的情况，例如在标记为“主按钮”的组件中，按钮的颜色无法如预期的那样显示为蓝色。本文将深入探讨这个问题，提供分步指南，指导你使用 Tailwind 的 CSS 实用程序类来轻松调整按钮的样式，使其呈现所需的蓝色。

问题：蓝色按钮的缺失

在使用 React Tailwind 时，你可能遇到这样一个问题：标记为“主按钮”的组件的样式并未显示为蓝色。相反，它可能显示为其他颜色，例如灰色或绿色，这与你的预期不符。

解决方案：替换 CSS 类

要解决此问题，你需要在 CSS 类中将 bg-primary-500 替换为 bg-blue-500。bg-primary-500 类通常与 Tailwind 的默认主按钮样式关联，但它并不总是能提供预期的蓝色颜色。

步骤：

找到在你的 React 组件中应用于按钮的 CSS 类。
将 bg-primary-500 替换为 bg-blue-500。

代码示例：

以下是已修改代码示例：

import React from "react";
import ReactDOM from "react-dom";
function Hero(){
    return (
        <section className="bg-white dark:bg-gray-900">
            <div className="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 lg:px-12">
                <a href="#" className="inline-flex justify-between items-center py-1 px-1 pr-4 mb-7 text-sm text-gray-700 bg-gray-100 rounded-full dark:bg-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700" role="alert">
                    <span className="text-xs **bg-blue-500**  rounded-full text-white px-4 py-1.5 mr-3">New</span> <span className="text-sm font-medium">Flowbite is out! See what's new</span> 
                    <svg className="ml-2 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd"></path></svg>
                </a>
                <h1 className="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">We invest in the world’s potential</h1>
                <p className="mb-8 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 xl:px-48 dark:text-gray-400">Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.</p>
                <div className="flex flex-col mb-8 lg:mb-16 space-y-4 sm:flex-row sm:justify-center sm:space-y-0 sm:space-x-4">
                    <a href="#" className="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg **bg-blue-500**  hover:bg-blue-600 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900">
                        Learn more
                        <svg className="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clipRule="evenodd"></path></svg>
                    </a>
                    <a href="#" className="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-gray-900 rounded-lg border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 dark:text-white dark:border-gray-700 dark:hover:bg-gray-700 dark:focus:ring-gray-800">
                        <svg className="mr-2 -ml-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"></path></svg>
                        Watch video
                    </a>  
                </div>
                <div className="px-4 mx-auto text-center md:max-w-screen-md lg:max-w-screen-lg lg:px-36">
                    <span className="font-semibold text-gray-400 uppercase">FEATURED IN</span>
                    <div className="flex flex-wrap justify-center items-center mt-8 text-gray-500 sm:justify-between">
                        <a href="#" className="mb-4 mr-8 sm:mb-0">
                            <img className="h-8" src="/images/logos/forbes.svg" alt="Forbes" />
                        </a>
                        <a href="#" className="mb-4 mr-8 sm:mb-0">
                            <img className="h-8" src="/images/logos/techcrunch.svg" alt="TechCrunch" />
                        </a>
                        <a href="#" className="mb-4 mr-8 sm:mb-0">
                            <img className="h-8" src="/images/logos/the-verge.svg" alt="The Verge" />
                        </a>
                        <a href="#" className="mb-4 mr-8 sm:mb-0">
                            <img className="h-8" src="/images/logos/wired.svg" alt="Wired" />
                        </a>
                        <a href="#" className="mb-4 sm:mb-0">
                            <img className="h-8" src="/images/logos/fast-company.svg" alt="Fast Company" />
                        </a>
                    </div>
                </div>
            </div>
        </section>
    )
}

export default Hero;