How to create a navbar using Tailwind CSS in React

Navigation bars, often called navbars, are a crucial part of web applications because they provide users with a clear and intuitive way to navigate through the various sections of a website or an application. For instance, let’s think of a typical website’s navbar at the top, which includes links to the homepage, products, services, about-us and contact information, etc. This user-friendly feature ensures that visitors can effortlessly explore the content and functionality offered by the site. Let’s see how to make one in a React application using Tailwind CSS—a popular utility-first CSS framework that makes creating stylish and responsive user interfaces easy.

Why Tailwind CSS?

Tailwind CSS offers a straightforward development experience in comparison to traditional CSS or third-party libraries. Its utility-firstA utility-first approach means that a user interface is built by using predefined utility classes, focusing on what each element should look like rather than writing custom CSS rules from scratch. approach simplifies the styling process by allowing developers to apply styles directly to HTML elements through easily recognizable class names. For example, the .text-red-500 class is used to make text elements red, and the .bg-blue-300 class is used to set a blue background color. Additionally, it enhances code maintainability by providing a consistent class naming convention. For instance, without a consistent naming convention, different developers might use various class names for button styles, such as .btn, .button, .btn-primary, or .blue-button. This inconsistency can lead to confusion, especially as the project grows. However, with Tailwind, the whole team can use the .bg-blue-500 and .text-white classes for a blue button with white text. Compared to traditional CSS and third-party libraries, Tailwind CSS excels in speed, simplicity, and ease of maintenance, making it ideal for modern web development.

Styling the navbar with Tailwind CSS

Tailwind CSS offers a comprehensive set of features and utility classes that make it easy to style a navbar, including:

  • Spacing and padding: Tailwind CSS provides classes like m-4 (for margins) and p-2 (for padding) to control spacing around navbar elements.

  • Flexbox and grid layout: Classes such as flex align the navbar items horizontally while the grid class enables grid-based layouts. For example, adding the flex class to a container aligns its child elements in a horizontal row.

  • Background and text colors: We can customize the colors of the navbar elements using classes like bg-blue-500 and text-white. Moreover, applying the bg-blue-500 class sets the background color to a shade of blue represented by the number 500500, while the text-white class defines the white text color.

  • Typography and text styling: Text styling is achievable with classes such as text-xl (for larger font size) and font-semibold (for semi-bold font weight). For instance, for smaller text, we use the text-sm class.

  • Responsive design: Tailwind CSS caters to mobile-first development. Responsive classes like md:bg-blue-500 help to adapt styling and layout for different screen sizes. In this case, the md:bg-blue-500 class sets a background color for medium-sized screens and larger ones.

  • Border and shadow effects: Classes like border and shadow-md create borders and shadows, adding depth and dimension to the navbar. For instance, applying border adds a simple border around an element.

  • Button styling: Tailwind CSS offers button styling classes. Buttons can be styled using classes like bg-blue-500 for background color and text-white for text color, resulting in a blue button with white text.

  • Dropdown menus: To create dropdown menus in the navbar, Tailwind CSS classes can be used alongside JavaScript or React state management. Classes like absolute and hidden control visibility and positioning of dropdown content.

Tailwind CSS is highly customizable, allowing modifications to the default configuration or the creation of custom utility classes to match specific project design requirements. This flexibility enables tailoring Tailwind CSS to unique styling preferences and project needs.

Example

Let’s look at a demo React app that demonstrates the use of Tailwind CSS to create a navbar.

Click the “Run” button to execute the code. Once the server starts, you can click the URL next to “Your app can be found at:” to view the application in the new browser tab.

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
Create the navbar using Tailwind CSS

  • Line 3: The App function returns JSX (JavaScript XML), representing the structure of the rendered navigation bar.

  • Line 5: The Tailwind CSS classes, bg-black and p-2, give the navigation bar a black background and padding on all sides (top, right, bottom, and left) by the factor 22 as per the defined scale.

  • Line 6: The container mx-auto class is used for the main container, which further consists of two sub-sections arranged using the flex layout: the left section with the logo and links and the right section with a search input and button.

  • Lines 8–29: The left section of the navbar contains the following:

    • Website logo: The logo image is represented by the img element. The w-10 class is applied to control the width of the image.

    • Website name: It is styled using the following Tailwind CSS classes:

      • text-purple-500: This class sets the text color to a shade of purple represented by 500500.

      • text-xl: This class defines an extra-large font size for the text.

      • font-bold: This class makes the text bold.

      • hover:text-white: When hovering over the text, this class changes the text color to white.

      • p-2: This class adds padding around the text.

    • Navigation links (About and Contact): They are styled using the following Tailwind CSS classes:

      • text-purple-500: This sets the text color to purple.

      • hover:text-white: This changes the text color to white on hover.

  • Lines 31–40: The right section of the navigation bar consists of the following:

    • Input field: It is styled with the following Tailwind CSS classes:

      • px-4 and py-1: These set the horizontal and vertical padding inside the input field, providing some spacing around the text.

      • rounded-l-md: This gives the left side of the input a rounded appearance.

      • focus:outline-none: This removes the outline that appears around the input when it’s focused (clicked on), providing a cleaner visual appearance.

    • The Search button: It is styled with the following Tailwind CSS classes:

      • px-4 and py-1: Similar to the input field, these classes set padding, ensuring the button has some spacing around the text.

      • bg-purple-500: This class defines the background color as a shade of purple.

      • text-white: This class sets the text color to white.

      • rounded-r-md: This class gives the right side of the button a rounded appearance.

      • hover:bg-purple-600: When hovering over the button, this class changes the background color to a slightly different shade of purple.

      • focus:outline-none: Similar to the input field, this class removes the outline when the button is focused, resulting in a cleaner look.

Overall, this code creates a simple and responsive navigation bar for a website, with styling applied using the Tailwind CSS classes to achieve a clean and visually appealing design.

Free Resources

Copyright ©2024 Educative, Inc. All rights reserved