How to add tailwind CSS colors and Fonts to your project

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 colors and Tailwind fonts available and guide you on incorporating your own custom colors and fonts into your project.

Table of content

Tailwind Fonts and Tailwind colors available in Tailwind CSS
Default Tailwind fonts
Making Tailwind custom Tailwind fonts
Default Tailwind colors
Making custom Tailwind CSS colors
Tips for Using Tailwind Colors
Conclusion

Tailwind Fonts and Tailwind colors available in tailwind CSS

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.

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.

Making Tailwind Custom Fonts: Step-by-Step Guide

There are two ways you can add fonts to your Tailwind CSS.

Loading the Fonts from the head tag
Extending the Font Utilities.

Let's delve into each approach in detail.

Step 1: Loading Fonts

The first step to adding Tailwind font to your project 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" />

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: Extending Font Utilities

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:

// 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 CSS fonts utility classes. To generate this file, you need to compile and build the styles by running the following command

Code:

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

/* 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 in your project.

Default Tailwind Colors: A Plethora of Options

Tailwind CSS offers a comprehensive range of colors to choose from for your project. These Tailwind colors can be customized to match your project's specific requirements. To incorporate colors into your project, you need to add Tailwind's color classes to your CSS file. Tailwind provides numerous color classes, enabling you to make precise color selections.

Additionally, 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

#F9FAFB

100

#F3F4F6

200

#E5E7EB

300

#D1D5DB

400

#9CA3AF

500

#6B7280

600

#4B5563

700

#374151

800

#1F2937

900

#111827

Red

colors.red

#FDF2F2

100

#FDE8E8

200

#FBD5D5

300

#F8B4B4

400

#F98080

500

#F05252

600

#E02424

700

#C81E1E

800

#9B1C1C

900

#771D1D

Yellow

colors.amber

#FDFDEA

100

#FDF6B2

200

#FCE96A

300

#FACA15

400

#E3A008

500

#C27803

600

#9F580A

700

#8E4B10

800

#723B13

900

#633112

Green

colors.emerald

#F3FAF7

100

#DEF7EC

200

#BCF0DA

300

#84E1BC

400

#31C48D

500

#0E9F6E

600

#057A55

700

#046C4E

800

#03543F

900

#014737

Blue

colors.blue

#EBF5FF

100

#E1EFFE

200

#C3DDFD

300

#A4CAFE

400

#76A9FA

500

#3F83F8

600

#1C64F2

700

#1A56DB

800

#1E429F

900

#233876

Indigo

colors.indigo

#F0F5FF

100

#E5EDFF

200

#CDDBFE

300

#B4C6FC

400

#8DA2FB

500

#6875F5

600

#5850EC

700

#5145CD

800

#42389D

900

#362F78

Purple

colors.violet

#F6F5FF

100

#EDEBFE

200

#DCD7FE

300

#CABFFD

400

#AC94FA

500

#9061F9

600

#7E3AF2

700

#6C2BD9

800

#5521B5

900

#4A1D96

Pink

colors.pink

#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 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 1: Generate the Configuration File

To begin, generate a Tailwind CSS configuration file by running the following command: Code:

bash

npx tailwindcss init.

This command creates a file named tailwind.config.js that will be used for customizing your Tailwind colors.

Step 2: Configure the tailwind.config.js File

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

Code:

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: [],
};

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

<!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

Tips for Using Tailwind Colors

When incorporating Tailwind colors into your project, consider the following tips and best practices:

Use Semantic Naming

Tailwind color classes have a semantic naming convention that makes it easy to remember and use them. For example, the class bg-red-500 means "background color red, shade 500". Make sure to use the correct naming convention to avoid confusion.

Use a Color Palette

To maintain consistency and coherence in your design, it is recommended to use a color palette that includes a selection of Tailwind colors. You can create your own palette or use one of the many online tools that generate color schemes based on a base color.

Consider Accessibility

When choosing colors for your design, it is important to consider accessibility and ensure that the color contrast meets the WCAG guidelines. You can use the WebAIM Color Contrast Checker to check the contrast ratio between two colors.

Use Variations

Tailwind colors come in different shades and variations, which you can use to add depth and contrast to your design. For example, you can use a darker shade for the background and a lighter shade for the text to create a readable contrast.

Experiment with Combinations

Don't be afraid to experiment with different color combinations to find the one that works best for your design. You can use tools like Adobe Color or Coolors to generate color schemes and test them in your project.

Conclusion

Adding Tailwind colors and fonts to your project is a simple process that can significantly improve the visual appeal and usability of your website or application. With Tailwind CSS, you can easily customize your color palette, define font families and sizes, and create beautiful designs without the need for custom CSS or design experience. By using the built-in classes and customization options provided by Tailwind CSS, you can save time and focus on building the core functionality of your project. So, whether you're a beginner or an experienced developer, Tailwind CSS is a powerful tool for creating modern and stylish designs that will impress your users and enhance their overall experience. Remember, the key to success with Tailwind CSS is to experiment, explore, and have fun with the endless possibilities that it offers.

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.

Tailwind CSS Colors 3.0

How to add tailwind CSS grid to your project.

Comments

...