Welcome to the second article in our series on building gorgeous websites with Next.js and Tailwind CSS! In our first article, we covered the basics of installing Tailwind CSS in a Next.js project and getting started with its utility classes. Now, we're taking things up a notch and diving into the world of customization.
Tailwind CSS is an amazing utility-first CSS framework that allows you to create beautiful, responsive designs quickly and easily, but what if you want to customize those styles to fit your project's specific needs? Fear not, because in this article, we'll walk you through some of the most common customization options, including customizing colors, adding custom spacing, defining custom typography and customizing breakpoints.
Before we begin, it's important to note that there's a handy extension for Visual Studio Code called Tailwind CSS IntelliSense that can help make the process smoother. This extension provides features such as autocomplete, syntax highlighting and linting. If you're using VS Code, we highly recommend installing it before continuing with this tutorial. Now, let's get started and make your website truly your own!
Table of Contents
- Customizing colors
- Customizing typography
- Customizing screens
- Customizing spacing
Customizing colors
When it comes to branding, colors play a vital role in creating a unique and memorable identity. Tailwind CSS makes it incredibly easy to customize your project's color scheme. By default, Tailwind comes with a set of pre-defined colors that can be used in your project. For instance, you can set the background color and text color of an element using its default colors like this:
<h1 className="bg-purple-800 text-grey-50">
Welcome to tailwind world!
</h1>
In the example above, the bg-purple-800 class sets the background color of the h1 element to a shade of purple. The number 800 represents the saturation level of the purple color; and the text-grey-50 class sets the color of the text to a shade of grey.
But what if you want to use a color that is not included in the default set? This is where customizing colors comes in handy. It's worth noting that when customizing your styles, in the theme object of your project's tailwind.config file, you keep in mind the order of your customizations. If you want to overwrite the default Tailwind colors with your own custom colors, make sure to place your custom color definition above the extend key. Contrarily, if you want to use your custom colors in addition to the default Tailwind colors, place your custom color definition below the extend key. This way, the default colors will be extended with your custom colors.
For example, let's say you want to add a custom color to your project called "primary" and still let tailwind default colors be present. You can add it in the theme object in a colors section like this:
module.exports = {
theme: {
extend: {
colors: {
primary: "#801111",
},
},
},
variants: {},
plugins: [],
}
Now, you can use the primary color in your project by referencing it in your CSS classes:
<h1 className="bg-primary">
Welcome to tailwind world!
</h1>
This sets the background color of the h1 element to your custom primary color. You can also set different shades like this:
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: {
100: "#7a1d1d",
500: "#741b1b",
900: "#5a0e0e",
},
secondary: "#7630a1"
},
},
},
variants: {},
plugins: [],
}
In this example, we're adding new shades with different hex values to the primary and secondary colors. Now, you can use the new shades in your project like this:
<h1 className="bg-primary-100">
Welcome to tailwind world!
</h1>
<h1 className="bg-secondary">
Welcome to tailwind world!
</h1>
Another way to customize your colors is by using the arbitrary values method. This method is particularly useful when you need to apply a specific value to an element, such as top: 117px, without having to create a separate class in your CSS file. With Tailwind's square bracket notation, you can easily generate classes with arbitrary values for various custom stylings, including background colors, font sizes, pseudo-element content, and more. Here's an example:
<h1 className="top-[117px] h-[500px] w-[800px]">
Welcome to tailwind world!
</h1>
In this example, we're using the top-[117px], h-[500px] and w-[800px] classes to apply an arbitrary top, height and width to the div, respectively. The possibilities are endless with this method, allowing you to customize your styles to your heart's content.
Customizing Typography
Customizing typography is all about defining your own font families, font sizes, font weights and more. This allows you to create a unique typography system that fits your project's specific needs. To do that, you can add new font families, font sizes, font weights and other typography-related styles to the theme section of your tailwind.config.js file. For example, you can define new font families like this:
module.exports = {
theme: {
fontFamily: {
'sans': ['Helvetica', 'Arial', 'sans-serif'],
'serif': ['Georgia', 'serif'],
'mono': ['Courier', 'monospace'],
},
},
variants: {},
plugins: [],
}
You can then reference it in your CSS classes like this:
<h1 className="font-sans">
Hello World!
</h1>
This is after you must have already attached the font links meta tags in the head of your HTML file. Another way to customize typography and basically customize any style is by using the globals.css file. Just as the name implies, the globals.css file defines global styles that can be used throughout your project. For instance, suppose you want to define a global font family and background color. You can do this in the globals.css file like this:
@import url('https://fonts.googleapis.com/css2?family=Alkatra&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html {
background-color: violet;
font-family: 'Alkatra', cursive;
}
}
In this example, we import the Alkatra font family from Google Fonts using @import, then use it to set the font-family of the html element in the @layer base block.
Additionally, we set the background color of the html element to violet. We use the @layer directive to specify the category of a custom style set. These styles can be classified into three valid layers, namely base, components, and utilities. You can adjust this value to whatever you prefer for your project.
Customizing Screens
Breakpoints are the pre-defined screen sizes that Tailwind uses to create responsive designs. By default, Tailwind provides a set of breakpoints that you can use to create responsive designs. However, you may want to customize these breakpoints to fit your project's specific needs. To customize your breakpoints, you need to add a screens object to your tailwind.config.js file. This object defines the new breakpoints and their values. For example:
module.exports = {
theme: {
screens: {
sm: '480px',
md: '768px',
lg: '976px',
xl: '1440px',
},
},
variants: {},
plugins: [],
}
It's important to note that Tailwind uses the min-width media query instead of the max-width media query. This means that when you define a screen size, you're actually defining the minimum screen size that the styles should apply to.
For example, in the code above, the sm screen applies to screens that are 480 pixels wide or larger, the md screen applies to screens that are 768 pixels wide or larger, and so on. We can now use these custom screen sizes in our utility classes. For example:
<h2 className="text-primary-100 text-1xl lg:text-7xl">
Welcome to tailwind world!
</h2>
Here, the text-primary-100 class sets the text color to the primary shade 100, the text-1xl class sets the font size to 1rem and the lg:text-7xl class sets the font size to 7rem on large screens. This means that on screens with a width of 976px or greater, the font size of the h2 element will be 7rem.
Customizing Spacing
In Tailwind CSS, spacing refers to the space between elements. By default, Tailwind provides a set of predefined spacing values that you can use to create visually appealing layouts. However, you may want to customize these values to fit your project's specific needs.
To customize spacing in Tailwind, you need to add a spacing object to your tailwind.config.js file. This object defines the new spacing values and their names. For example:
module.exports = {
theme: {
spacing: {
'1': '8px',
'2': '12px',
'3': '16px',
'4': '24px',
}
},
variants: {},
plugins: [],
}
In the code above, we added new spacing values with their respective values. We can now use these custom spacing values in our utility classes:
<h1 className="p-2 mb-1">
Hello World!
</h1>
Here, we used the p-2 class to set a padding of 12px and the mb-1 class to set a margin bottom of 8px on the h2 element.
Conclusion
Customizing the default settings can seem intimidating, but with the tips outlined in this article, you can easily create a custom design that fits your project's specific needs. From customizing colors to defining your own spacing scale, the possibilities are endless with Tailwind CSS. So go ahead, get creative and happy coding!
Top comments (3)
The main edge I find with tailwind over css and scss is that I don't have to spend hours on picking good class names in my react projects and with tools like tailwind-styled-components, I don't even have to write tailwind in my classnames.
Exactly!!!
Excellent article, thank you!!