How to add tailwind CSS colors and Fonts to your project
Tags: css, tailwindcss, programming, webdev
Published: 2021-10-10 01:30:35

---
title: How to add tailwind CSS colors and Fonts to your project
published: true
date: 2021-01-10 01:16:04 UTC
tags: [css, tailwindcss, programming, webdev]
canonical_url: https://www.devwares.com/blog//how-to-add-tailwind-css-colors-and-fonts-to-your-project
cover_image: https://www.devwares.com/blog/images/colors-and-fonts.png
---

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**: among the three ways we will explore how to add fonts to your Tailwind CSS project, the first step is always to load your web font into your `<head >` tag of your page. 

**Code :**

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

or

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

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

```javascript
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. These 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:**

```javascript
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 

```javascript
/* 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.

## 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:**

```javascript
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 go ahead and customize our own color in our tailwind.config.js file

**Code:**

```javascript
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:**

```html
npx tailwindcss build styles.css –o styles/tailwind.css.
```

next, we are going to build a color 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>
```

Our webpage should look like the image below

![Using Tailwind CSS Colors and Fonts](/blog/images/colors-and-fonts2.png)
 
###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.

## Design and code tailwind css websites 3x faster

We created a tool to visually build tailwind css components, prototypes, websites, and webapps. Ship projects faster using an intuitive tailwind builder and editor.[Try Windframe out for free.](https://www.devwares.com/windframe)

![WINDFRAME](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8w3qu4a93bdkhtjnhbh.png)

## Resources 

- [Get Contrast PRO](https://www.devwares.com/product/bootstrap-contrast-pro)

- [How to use tailwind CSS in HTML]  (https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML)

- [Why tailwind CSS is good](https://www.devwares.com/blog/why-tailwind-css-is-good)

- [How to use Tailwind CSS in Nextjs](https://www.devwares.com/blog/tailwind-css-in-nextjs)

- [How to create Tailwind CSS Components for your Website](https://www.devwares.com/blog/how-to-create-tailwind-css-components-for-your-website)

- [How to create Tailwind CSS Animation](https://www.devwares.com/blog/create-animation-with-tailwind-css/)

- [Tailwind grid-How to use tailwind CSS grid templates in your project](https://www.devwares.com/blog/how-to-add-tailwind-css-grid-to-your-project/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind form-How to create and style a Responsive Form using Tailwind CSS](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/)

- [Tailwind CSS Flex: How to use Tailwind CSS Flex](https://www.devwares.com/blog/how-to-use-tailwind-css-flex/)

- [How to use tailwind CSS padding, margin and border in your project](https://www.devwares.com/blog/how-to-use-tailwind-css-padding-margin-and-border-in-your-project/)

- [Tailwind CSS CDN-How to use the Tailwind CSS JIT CDN](https://www.devwares.com/blog/how-to-use-the-tailwind-css-JIT-CDN/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [How to use Tailwind CSS in HTML](https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML/)

- [Tailwind CSS table-How to Create Tailwind CSS tables](https://www.devwares.com/blog/how-to-create-tailwind-css-tables/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [Why is tailwind CSS better than other CSS framework](https://www.devwares.com/blog/why-tailwind-css-is-good/)

- [10 tailwind CSS templates and themes](https://www.devwares.com/blog/tailwind-css-10-templates-and-themes/)

- [How to add tailwind CSS colors and Fonts to your project](https://www.devwares.com/blog/how-to-add-tailwind-css-colors-and-fonts-to-your-project/)

- [Differences between Tailwind CSS and SASS](https://www.devwares.com/blog/differences-between-tailwind-css-and-sass/)

- [Differences Between Tailwind CSS and Bootstrap](https://www.devwares.com/blog/diffrences-between-tailwind-css-and-bootstrap/)

- [10 Awesome projects built with Tailwind CSS](https://www.devwares.com/blog/awesome-10-projects-built-with-tailwind/).

- [How to install Tailwind CSS in Vue.js](https://www.devwares.com/blog/how-to-install-tailwind-css-in-vuejs/).

- [How to use Tailwind CSS in React](https://www.devwares.com/blog/how-to-use-tailwind-css-in-react/)

- [How to install Tailwind CSS with Laravel](https://www.devwares.com/blog/how-to-install-tailwind-css-in-laravel/)

- [How to create react date picker](https://www.devwares.com/blog/create-datepicker-with-contrast/)

- [React bootstrap 5 form-How to create React forms](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/).

- [How to create a beautiful React multiselect](https://www.devwares.com/blog/create-multiselect-with-contrast/).

- [How to create a beautiful React Bootstrap progress bar](https://www.devwares.com/blog/create-progress-with-contrast/).

- [How to create a beautiful React Bootstrap select with icons](https://www.devwares.com/blog/create-select-with-contrast/).

- [How to create a beautiful Bootstrap 5 stepper](https://www.devwares.com/blog/create-stepper-with-contrast/)

- [How to create a beautiful React Bootstrap table]
(https://www.devwares.com/blog/create-tables-with-contrast/)

- [How to create beautiful React Bootstrap tabs](https://www.devwares.com/blog/create-tabs-with-contrast/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind Modal-How to create a React Modal using Tailwind CSS.](https://www.devwares.com/blog/how-to-create-a-react-modal-using-tailwind-css/)

- [How to create a Bootstrap 5 Modal.](https://www.devwares.com/blog/how-to-create-a-bootstrap5-modal/)

- [How to create a beautiful Bootstrap Data table with Icons](https://www.devwares.com/blog/create-datatable-with-contrast/)

- [How to create a React date picker.](https://www.devwares.com/blog/create-datepicker-with-contrast/)

- [React bootstrap 5 form-How to create React forms](https://www.devwares.com/blog/create-forms-with-contrast/)

- [How to create a Angular Bootstrap Sidebar](https://www.devwares.com/blog/how-to-create-an-angular-bootstrap-sidebar/)

- [How to use Bootstrap in React Using a React Library](https://www.devwares.com/blog/using-bootstrap-in-react/)

- [How to Create React Tabs with Tailwind CSS](https://www.devwares.com/blog/how-to-create-react-tabs-with-tailwind-css/)

- [How to implement dark mode in React using tailwind css](https://www.devwares.com/blog/how-to-implement-dark-mode-in-tailwind-css/)

- [How to Implement a React Step Progress Bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-implement-a-react-step-progress-bar-using-tailwind-css/)