postImage

How to add tailwind CSS colors and Fonts to your project

blogImage

By Emmanuel Chinonso

Technical Writer

Adding Tailwind colors and Tailwind fonts to your project is an effortless way to elevate your design and create a captivating user experience. In this article, we will explore the diverse range of Tailwind CSS colors and Tailwind CSS fonts available and guide you on incorporating your own custom colors and fonts into Tailwind for your project.

Table of content

  • Using Tailwind Fonts and Tailwind colors
  • Integrating Tailwind CSS Colors
  • Default Tailwind colors
  • Applying Tailwind Background color
  • Applying Tailwind Text Color
  • Customizing Tailwind Colors
  • Default Tailwind fonts
  • Customizing the default Tailwind fonts
  • Conclusion

Using Tailwind Fonts and Tailwind colors

Tailwind CSS provides a selection of default fonts and colors that serve as an excellent starting point for your designs. Choosing the right fonts and colors are crucial for a visually pleasing design. Both Tailwind colors and Tailwind fonts offer a curated collection to assist designers in making the ideal fonts and colors choices for their work.

Integrating Tailwind CSS Colors

Installing Tailwind CSS To get started, you need to install Tailwind CSS. Open your project's terminal and run the following command:

bash
npm install tailwindcss

After installing tailwindcss both tailwind default colors and fonts will be avaliable for you to use.

Default Tailwind Colors

Tailwind CSS offers a comprehensive range of colors to choose from for your project. Tailwind CSS comes with an appealing default color palette right out of the box, ensuring your designs look impressive. Take a look at some of the default Tailwind colors you can experiment with:

Gray
colors.coolGray
50
#F9FAFB
100
#F3F4F6
200
#E5E7EB
300
#D1D5DB
400
#9CA3AF
500
#6B7280
600
#4B5563
700
#374151
800
#1F2937
900
#111827
Red
colors.red
50
#FDF2F2
100
#FDE8E8
200
#FBD5D5
300
#F8B4B4
400
#F98080
500
#F05252
600
#E02424
700
#C81E1E
800
#9B1C1C
900
#771D1D
Yellow
colors.amber
50
#FDFDEA
100
#FDF6B2
200
#FCE96A
300
#FACA15
400
#E3A008
500
#C27803
600
#9F580A
700
#8E4B10
800
#723B13
900
#633112
Green
colors.emerald
50
#F3FAF7
100
#DEF7EC
200
#BCF0DA
300
#84E1BC
400
#31C48D
500
#0E9F6E
600
#057A55
700
#046C4E
800
#03543F
900
#014737
Blue
colors.blue
50
#EBF5FF
100
#E1EFFE
200
#C3DDFD
300
#A4CAFE
400
#76A9FA
500
#3F83F8
600
#1C64F2
700
#1A56DB
800
#1E429F
900
#233876
Indigo
colors.indigo
50
#F0F5FF
100
#E5EDFF
200
#CDDBFE
300
#B4C6FC
400
#8DA2FB
500
#6875F5
600
#5850EC
700
#5145CD
800
#42389D
900
#362F78
Purple
colors.violet
50
#F6F5FF
100
#EDEBFE
200
#DCD7FE
300
#CABFFD
400
#AC94FA
500
#9061F9
600
#7E3AF2
700
#6C2BD9
800
#5521B5
900
#4A1D96
Pink
colors.pink
50
#FDF2F8
100
#FCE8F3
200
#FAD1E8
300
#F8B4D9
400
#F17EB8
500
#E74694
600
#D61F69
700
#BF125D
800
#99154B
900
#751A3D

Applying Tailwind Background color

Tailwind CSS also offers a variety of utility classes for setting background colors. You can use the bg-{color} classes to apply background colors to different elements. For example, the bg-yellow-200 class sets the background color of an element to a light yellow shade, while the bg-gray-800 class applies a dark gray background color. By using these classes in conjunction with other utility classes, such as hover:bg-{color} for hover effects, you can create engaging and interactive user interfaces.

html
<div class="grid gap-4 md:grid-cols-4 md:grid-rows-2">
<div class="flex h-28 w-full items-center justify-center rounded-lg bg-blue-600">
<p class="text-neutral-50">bg.blue</p>
</div>
<div class="flex h-28 w-full items-center justify-center rounded-lg bg-orange-300">
<p class="text-neutral-50">bg.orange</p>
</div>
<div class="flex h-28 w-full items-center justify-center rounded-lg bg-green-400">
<p class="text-neutral-50">bg.green</p>
</div>
<div class="flex h-28 w-full items-center justify-center rounded-lg bg-red-600">
<p class="text-neutral-50">bg.red</p>
</div>
<div class="flex h-28 w-full items-center justify-center rounded-lg bg-yellow-500">
<p class="text-neutral-50">bg.yellow</p>
</div>
<div class="flex h-28 w-full items-center justify-center rounded-lg bg-blue-400">
<p class="text-neutral-50">bg.sea-blue</p>
</div>
<div class="flex h-28 w-full items-center justify-center rounded-lg bg-neutral-50">
<p class="text-neutral-800">bg.light</p>
</div>
<div
class="flex h-28 w-full items-center justify-center rounded-lg bg-neutral-800 dark:bg-neutral-900"
>
<p class="text-neutral-50">bg.dark</p>
</div>
</div>

Using Tailwind CSS Colors

Applying Tailwind Text Color

To change the color of the text, you can utilize the text-{color} classes provided by Tailwind CSS. For instance, the text-red-500 class applies a red color to the text, while the text-green-600 class sets the text color to a darker green shade. By combining these classes with other utility classes, such as hover:text-{color} for hover effects, you can create dynamic and visually appealing text styles.

html
<div class="grid-rows-8 grid gap-4">
<p class="text-blue-700">Lorem ipsum dolor sit amet</p>
<p class="text-orange-400">Lorem ipsum dolor sit amet</p>
<p class="text-green-600">Lorem ipsum dolor sit amet</p>
<p class="text-red-600">Lorem ipsum dolor sit amet</p>
<p class="text-yellow-500">Lorem ipsum dolor sit amet</p>
<p class="text-blue-400">Lorem ipsum dolor sit amet</p>
<p class="bg-neutral-800 text-neutral-50 dark:bg-transparent">
Lorem ipsum dolor sit amet
</p>
<p class="text-neutral-800 dark:bg-neutral-50 dark:text-neutral-900">
Lorem ipsum dolor sit amet
</p>
</div>

Using Tailwind CSS Colors

Customizing Tailwind Colors

Step 1: Configuration After installing Tailwind CSS, you'll need to create a configuration file. Run this command:

bash
npx tailwindcss init

This command generates a tailwind.config.js file where you can customize your project's color palette.

Step 2: Customizing Colors

Open the tailwind.config.js file and customize or create your desired colors within the theme.extend.colors section, as shown below:

Code:

js
/** @type {import('tailwindcss').Config} */
export default {
theme: {
extend: {
// ...
colors: {
primary: {
blue: 'hsl(237, 63%, 64%)',
'very-light': 'hsl(240,78%, 98%)',
light: 'hsl(234, 14%,74%)',
normal: 'hsl(23, 13%, 33%)',
dark: 'hsl(232,13%,33%)',
},
},
},
},
plugins: [],
};

In the code snippet above, we have added a custom color palette under the colors section. You can define various shades and hues for each color. Feel free to adjust the values according to your preferences.

Step 3: Compile and Build the Styles

After configuring the tailwind.config.js file, you need to compile and build the styles to generate the customized Tailwind CSS file. Execute the following command in your terminal:

Code:

bash
npx tailwindcss build styles.css –o styles/tailwind.css.

This command compiles the styles and outputs the resulting CSS file in the styles/tailwind.css directory.

To showcase the custom colors, let's create a Tailwind colors project and add the following code snippet to an HTML file:

Code:

html
<div class="grid gap-2 items-center justify-center">
<div class="flex h-28 w-28 items-center justify-center rounded-lg bg-primary-blue m-4">
<p class="text-primary-very-light">Custom color</p>
</div>
</div>

Our webpage should look like the image below custom-colors

Default Tailwind fonts

Tailwind uses only three default font styles. These font syles include font-sans, font-serif, and font-mono. These fonts are ideal for all screens.

Applying Fonts to Text Elements

To change the font of a text element, you can utilize the font-{family} classes provided by Tailwind CSS. For instance, the font-mono class applies a monospaced font, while the font-bold class sets the font weight to bold. By combining these font classes with other utility classes, such as text-{size} for font size and text-{color} for text color, you can create unique and visually appealing text styles

html
<div class="m-6 ">
<p class="font-serif m-2 ">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p class="font-sans m-2">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p class="font-mono m-2">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>

Using Tailwind Fonts

How to use Custom Fonts in Tailwind CSS : Step-by-Step Guide

You can either use the web fonts or load your fonts locally. We are going to explore how to do this in more details.

Adding WebFonts to Tailwind CSS project

The first step is to load your web font into the <head > tag of your page as we can see in the code below.

Code:

html
<link href="https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap" rel="stylesheet" />

or

html
<style>
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap');
</style>

Add any of the lines of code above in the head part of your code.

Now, there are two ways you can go about it. You can choose any of the two ways depending on the need of your project.

First Option: Extending Font Utilities

This option allows you to retain the tailwind font together with your own. You simply include the extend functionality to the existing font utilities.

To do this, we add a theme.extend.fontfamily section to the tailwind.config.js file just as follows.

Code:

js
// Tailwind.config.js file.
module.exports = {
theme: {
// Some useful comment
extend: {
fontFamily: {
nunito: ['nunito', 'sans-serif'],
},
},
},
variants: {
// Some useful comment
},
plugins: [
// Some useful comment
],
};

In the code above, you are simply extending the default configuration. This adds a new font family to your already existing Tailwind font utility classes. To generate this file, you need to compile and build the styles by running the following command:

Code:

bash
npx tailwindcss build styles.css –o styles/tailwind.css

Code:

css
/* Generated by Tailwind CSS in your css file */
.font-sans {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
}
.font-serif {
font-family: Georgia, Cambria, 'Times New Roman', Times, serif;
}
.font-mono {
font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}
.font-nunito {
font-family: nunito, sans-serif;
}

In the file above, the generated CSS will not only have the new fonts included but will retain the default fonts too. You can now go ahead to include it in your project.

Second Option: Replacing Tailwind CSS Font with your own

This option allows you to completely remove the Tailwind CSS font utilities and add your own.

To do this, simply add your fonts in the theme.fontfamily section of the tailwind.config.js file just as follows

js
/* In your tailwind.config.js */
module.exports = {
theme: {
// Some useful comment
fontFamily: {
'nunito': ['nunito', 'sans-serif'],
'MyFont': ['"My Font"', 'serif']
'MoreFonts': ['"MoreFonts"', 'mono']
// Ensure fonts with spaces have " " surrounding it.
},
},
variants: {
// Some useful comment
},
plugins: [
// Some useful comment
]
}

In the code above, you are replacing the default configuration for fonts with your own. To generate the file, you need to compile and build the styles by running the following command

Code:

bash
npx tailwindcss build styles.css –o styles/tailwind.css

The generated file will look like the code below

css
/* Generated by Tailwind CSS in your css file */
.font-nunito {
font-family: nunito, sans-serif;
}
.font-MyFont {
font-family: 'My Font', serif;
}
.font-MoreFonts {
font-family: 'MoreFonts', mono;
}

Loading Local Fonts to Tailwind CSS

Before you can load local fonts into Tailwind CSS, you'll need to choose the fonts you want to use. You can download custom fonts or use system fonts installed on your computer.

step1: Include the fonts on your project

You can include local fonts using @font-face rule. You just need to import them into a new CSS file or directly into your HTML files.Here's an example of how to do that:

css
@font-face {
font-family: 'Roboto';
src: url('/fonts/roboto.woff') format('woff');
font-weight: normal;
font-style: normal;
}

step2: Customize Tailwind CSS After including the fonts locally, you should configure your tailwind.config.js or tailwind.config.ts file to

js
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['Roboto', 'sans'],
},
},
},
plugins: [],
};

In this example, we've added Roboto as the font for sans-serif text.

step3: Apply Your Local Fonts

Now that your fonts are loaded and Tailwind CSS is configured to use them, you can apply your local fonts to your HTML elements. For example:

html
<h1 class="font-serif">Welcome to My Website</h1>

Tailwind CSS Fonts .

The first <h1> element will use the Roboto font.

You can see that Loading local fonts into Tailwind CSS is a straightforward process that allows you to give your website a unique and personalized touch. By following these steps and customizing your Tailwind configuration, you can seamlessly integrate your favorite local fonts into your web projects.

Conclusion

In this detailed guide, we explored how to add Tailwind CSS colors and fonts to your web development project. We looked at the default tailwind CSS colors and tailwind fonts and how to add your own custom colors and fonts in Tailwind css project. By following these steps, you can create visually stunning user interfaces that set your websites and applications apart from the competition.

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

ad-banner

Related Posts

Comments

...