Part 32: Styling with Tailwind CSS in Your Next.js Project
[Pages] Next Shop: Setup
In our previous post, we configured Tailwind CSS in our Next.js project. Now, let's dive deeper into what makes Tailwind special and how we can use it to style our components effectively. Tailwind CSS is a "utility-first" framework, meaning it offers a wide array of small, single-purpose classes that you can combine to build any design directly within your HTML.
Understanding Utility-First Approach
Instead of defining separate CSS classes for each component, Tailwind encourages the use of utility classes directly in your HTML elements. This might sound odd initially, but it allows for rapid styling without the need to write custom CSS for every component. Let's explore this with an example.
Traditional vs. Tailwind Approach
Traditional CSS Example:
In a conventional styling approach, you might define a chat-notification-title class in your CSS and assign it to an element like this:
<!-- Traditional HTML -->
<h4 class="chat-notification-title">New Message</h4>/* styles/chatNotification.css */
.chat-notification-title {
color: black;
font-size: 1.25rem;
font-weight: 500;
}Tailwind CSS Example:
With Tailwind, you can achieve the same styling directly in your HTML by using utility classes:
<!-- pages/index.js -->
<h4 className="text-black text-xl font-medium">New Message</h4>Tailwind's utility classes like text-xl, font-medium, and text-black specify font size, weight, and color, respectively. This approach keeps your component styling concise and easily readable.
Styling with Tailwind
Let's style a simple component using Tailwind classes. We'll start with our main page content, adding some padding to the main element.
Adding Padding
In Tailwind, padding classes are denoted as p-, followed by a number that specifies the amount. This number represents a predefined scale, not actual pixel values.
// pages/index.js
import Head from 'next/head';
import Title from '../components/Title';
function HomePage() {
return (
<>
<Head>
<title>Next</title>
</Head>
<main className="px-6 py-4">
<Title>Next Shop</Title>
<p>
[TODO: display products]
</p>
</main>
</>
);
}
export default HomePage;In this example, px-6 applies horizontal padding, while py-4 adds vertical padding, creating a balanced spacing around our content.
Adjusting Text Size
Tailwind provides several text size classes, such as text-lg for large text and text-2xl for extra-large text. Let's apply this to our heading:
// components/Title.js
function Title({ children }) {
return (
<h1 className="text-2xl pb-4">
{children}
</h1>
);
}
export default Title;Here, text-2xl increases the text size, and pb-4 adds padding below the heading to separate it from subsequent elements.
Reusability with React Components
Tailwind's utility classes can be verbose when reused across multiple components. To maintain reusability, create small React components encapsulating your styles.
Creating a Reusable Title Component
Instead of repeating the heading styles, encapsulate them within a Title component:
// components/Title.js
function Title({ children }) {
return (
<h1 className="text-2xl pb-4">
{children}
</h1>
);
}
export default Title;This component takes children as a prop, allowing you to pass any content you want to display as a heading. You can now use this Title component across different pages, ensuring consistent styling without code duplication.
Conclusion
Tailwind CSS simplifies the styling process by providing a comprehensive set of utility classes that can be directly applied to HTML elements. This approach makes it easier to develop responsive, modern designs while keeping your codebase clean and maintainable. By combining Tailwind with React components, you can achieve both flexibility and reusability in your Next.js projects.
As we continue building our shop application, you'll see more examples of how Tailwind can streamline the styling process. Stay tuned for more tips and tricks on using Tailwind CSS effectively!
Last updated