Getting started with Tailwind: Using Tailwind to create a button

Create a simple button using Tailwind CSS

Introduction

Tailwind CSS is a utility-first CSS framework that makes styling and building web-applications easier and faster without having to leave your HTML. You can combine these low-level utility classes to create custom components without having to write a single line of custom CSS. Like eating your favorite meal for the firdt time, you are guaranteed to fall in love with the ease and convenience of Tailwind.

Step 1: Getting started

To create this button, we’ll use Tailwind CSS installed in a React environment. First, install Tailwind and React on your computer. If you haven’t installed Tailwind yet, read my article on how to do so here. To learn how to install Create React App, refer to my article here.

Step 2: Install Tailwind extension

After succesfully installing Tailwind, download the tailwind extension called Tailwind CSS Intellisense.

This extension elevates the Tailwind experience by providing autocomplete, syntax highlighting, hover previews and linting.

• Arrow A is the autocomplete suggestion from tailwind css intellisens
• Arrow B is the popup that shows the custom CSS translation of every tailwind class. in this case it is showing the vanilla CSS of the class ‘flex’

Step 3: Setting up Button Component

In the App.js file of your react folder, clear the clear the template written there that is the default code comes when you install react.

Type in the HTML tag element for button

<div>
<button>Click me!</button>
</div>

Step 4: Styling the Buttton

Tailwind classes are analogous to vanilla CSS, maintaining the same meanings. However you cannot possibly memorize the entire class base in tailwind!! And you don’t have to. You can pause here and head over to the tailwind official website to get familiar with the classes. On the official tailwind website there is a search bar. Enter the name of the CSS class to find the corresponding tailwind format.

Eg: if you are searching for the tailwind class for align-items: ‘center’, type ‘align items’ in the search bar and you will be taken to the page.

Now that you have a basic understanding on how to navigate tailwind website let’s get back to it

• In your app.js file type in the attribute “className” in camel casing into the opening tag of the button element and equate it to empty quotation marks.

<div>
<button className=" ">Click me!</button>
</div>

• Center the button to the screen by using display of flex, align items to center, justify to center and set height to 100vh. Your code should look like this;

• Next set the background color of the button to blue, 10% width, set a border radius, give it a padding of 8px, change the text to white and make it semi-bold.

Did you know that you can hover over each utility class to get a pop up showing the vanilla CSS translation of the class?

Step 5: Adding Interactivity

You can style in tailwind using pseudoclasses and this helps to add further interactivty to your components. For this button we will be scaling on click and creating a box shadow on hover.

There you have a perfectly clickable button. Hit save and open your terminal to start up your server.

Did you know that the keyboard shortcut alt + Z wraps your text to fit the width of your screen? Trust me you’ll be needing it when writing in tailwind.

Conclusion

Styling with Tailwind CSS is rapid and straightforward. Practice more to become familiar with the syntax, which ultimately speeds up your coding process. Create your own tailwind copnonents and have fun while doing it!

For questions and contibutions, reach out to me on Twitter now X. Until next time, happy coding!