ūü•≥
WindFrame is here: Design, prototype and code
sale icon End of Summer Sale ūüéĀ Get Contrast PRO UI library + admin template with 5 admin dahsboards, 23 pages and 10000+ components at 60% off ūüéČ
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 own without removing the original color

Table of content

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

Fonts and colors available in tailwind CSS

There are different default Tailwind CSS colors and fonts available but there are very limited. You can check out some of them in the Tailwind CSS docs.

Making 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 :

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

or

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

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

Step 2:

Use the extend functionality to add to the existing font utilities. After installing Tailwind CSS in our project and configuring the postcss file, we can go ahead to generate a tailwind.config.js file. We can add a theme.extend.fontfamily section to the tailwind.config.js file just as follows.

Code:

1// Tailwind.config.js file.
2
3module.exports = {
4 theme: {
5 // Some useful comment
6 extend: {
7 fontFamily: {
8 'nunito': ['nunito', 'sans-serif']
9 },
10 },
11 },
12 variants: {
13 // Some useful comment
14 },
15 plugins: [
16 // Some useful comment
17 ]
18}

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:

1npx tailwindcss build styles.css ‚Äďo styles/tailwind.css

Code:

1/* Generated by Tailwind CSS in your css file */
2
3.font-sans {
4 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
5 Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
6 "Segoe UI Symbol", "Noto Color Emoji";
7}
8
9.font-serif {
10 font-family: Georgia, Cambria, "Times New Roman", Times, serif;
11}
12
13.font-mono {
14 font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
15}
16
17.font-nunito {
18 font-family: nunito, sans-serif;
19}

In order

1/* In your tailwind.config.js */
2const defaultTheme = require('tailwindcss/defaultTheme')
3
4module.exports = {
5 theme: {
6 // Some useful comment
7 fontFamily: {
8 'sans': ['nunito', ...defaultTheme.fontFamily.sans],
9 'serif': [...defaultTheme.fontFamily.serif],
10 'mono': [...defaultTheme.fontFamily.mono]
11 },
12 },
13 variants: {
14 // Some useful comment
15 },
16 plugins: [
17 // Some useful comment
18 ]
19}

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.

Making custom colors

To generate your own custom color, 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:

1npx 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:

1module.exports = {
2  purge: [],
3  darkMode: false, // or 'media' or 'class'
4  theme: {
5    extend: {
6colors: {
7        primary: {
8          blue: 'hsl(237, 63%, 64%)',
9          'very-light': 'hsl(240,78%, 98%)',
10          light: 'hsl(234, 14%,74%)',
11          normal: 'hsl(23, 13%, 33%)',
12          dark: 'hsl(232,13%,33%)'
13        }
14      },
15},
16  },
17  variants: {
18    extend: {},
19  },
20  plugins: [],
21}

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:

1npx tailwindcss build styles.css ‚Äďo styles/tailwind.css.

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

Code:

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>colors </title>
9    <link href="styles/styles.css" rel="stylesheet">
10</head>
11
12<body class="text-center ">
13    <div class="flex justify-center">
14        <img src="images/devwares-logo.png" alt="" class="w-24">
15    </div>
16    <b>Tailwind CSS Customize colors</b>
17    <div class="h-60 w-25 m-5 bg-primary-blue">
18        DEVWARES.
19    </div>
20
21</body>

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 customized colors to build a project. I hope you enjoyed the tutorial.

Create Stunning websites and web apps

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.Try contrast pro

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

...