🤩
Windframe Import update is finally here!
postImage

How to add tailwind CSS colors and Fonts to your project

blogImage

By Emmanuel Chinonso

Technical Writer

Adding Tailwind CSS colors and fonts to your project is easy and only takes a few classes. Colors and fonts make our designs more appealing and give a better user experience. We are going to look at common tailwind CSS colors and fonts you can add to your project and how to use the custom Tailwind colors and font to make your own.

Table of content

  • Tailwind Fonts and colors available in tailwind CSS
  • Default Tailwind fonts
  • Making Tailwind custom Tailwind fonts
  • Default Tailwind colors
  • Making custom Tailwind css colors
  • Conclusion

Tailwind Fonts and Tailwind colors available in tailwind CSS

There are different default Tailwind colors and fonts available, but there are very limited. You can check out some of them in the Tailwind CSS docs. In making a good design, choosing a good font is very important. Having Tailwind fonts to choose from for your designs helps in making your work much better. These Tailwind fonts are well crafted to help designers choose the best fonts and colors for their work.

Making Tailwind custom fonts

There are three ways you can add fonts to your Tailwind CSS. We are going to look at the ways you can do this here.

Step 1:

The first step to adding fonts in your web page is always 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.

Step 2:

The second step is by adding the extend functionality to the existing font utilities.

To do this, we will first install Tailwind CSS in our project and configure the postcss file. We can go ahead and generate a tailwind.config.js file. We can 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 new font family to your already existing Tailwind CSS fonts utility classes. To generate this file, you need to compile and build the styles by running the following command

Code:

r
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 order

js
/* In your tailwind.config.js */
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
theme: {
// Some useful comment
fontFamily: {
sans: ['nunito', ...defaultTheme.fontFamily.sans],
serif: [...defaultTheme.fontFamily.serif],
mono: [...defaultTheme.fontFamily.mono],
},
},
variants: {
// Some useful comment
},
plugins: [
// Some useful comment
],
};

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 on your project.

Default Tailwind colors

Tailwind css colors will provide you with an excellent selected default color palette right out of the box for your designs.

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

Making custom Tailwind colors

To generate your own custom Tailwind colors, you must already have the Tailwind CSS installed on your project. You can check out how to do this in our post here. Step 2. You generate a tailwind CSS configuration file by running the following code

Code:

r
npx tailwindcss init.

The code above allowed us to generate a file named tailwind.config.js file

Step 3: Configure your tailwind.config.js file

We can customize, or create our own color in our tailwind.config.js file

Code:

js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
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%)',
},
},
},
},
variants: {
extend: {},
},
plugins: [],
};

Step 4

After this, we can now proceed to compile and build the styles. This will generate a unique set of Tailwind CSS styles including our custom styles. we can do this by running the following command on the terminal.

Code:

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

next, we are going to build a Tailwind colors project to show our custom color.

Code:

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>colors</title>
<link href="styles/styles.css" rel="stylesheet" />
</head>
<body class="text-center ">
<div class="flex justify-center">
<img src="images/devwares-logo.png" alt="" class="w-24" />
</div>
<b>Tailwind CSS Customize colors</b>
<div class="h-60 w-25 m-5 bg-primary-blue">
DEVWARES.
</div>
</body>
</html>

Our webpage should look like the image below

Using Tailwind CSS Colors and Fonts

Conclusion

In our tailwind CSS tutorial, we learned how to customize tailwind CSS colors and fonts. We also used the customized Tailwind colors to build a project. I hope you enjoyed the tutorial.

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help 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 UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast

Related Posts

Comments

...