Tailwind button style example

tailwind

Here is an example of a button styled using Tailwind CSS classes:


<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">
    Button
</button>

In this example, the bg-blue-500 class sets the background color to a medium blue, the hover:bg-blue-700 class sets the background color to a dark blue on hover, the text-white class sets the text color to white, the font-bold class makes the text bold, the py-2 class adds padding to the top and bottom of the button, the px-4 class adds padding to the left and right of the button, and the rounded-full class adds rounded corners to the button.

You can customize this button by modifying the classes used or by adding additional classes as needed. For example, you can use the focus:outline-none class to remove the focus outline, or the transition-colors class to add a smooth color transition when the button is hovered or focused.

Here is an example of a customized button:


<button
    class="bg-pink-500 hover:bg-pink-700 focus:bg-pink-800 text-white font-bold py-2 px-4 rounded-full focus:outline-none transition-colors duration-150">
    Button
</button>

In this example, the focus:bg-pink-800 class sets the background color to a light pink on focus, the focus:outline-none class removes the focus outline, and the transition-colors class adds a smooth color transition when the button is hovered or focused with a duration of 150 milliseconds.