Can Tailwind colors be referenced from CSS ?

Last Updated : 23 Nov, 2023

In this article, we are going to learn how we can reference tailwind colors from the CSS

Tailwind CSS is a CSS framework that enables easy and quick design by applying its utility classes directly to the HTML markup. The theme( ) function allows you to access the Tailwind CSS color palette, spacing, fonts, and shadows from within your CSS code. The Tailwind Colors can be referenced from CSS by the following methods:

Using functions in your Tailwind CSS projects promotes consistency and code reusability.
The ‘theme()’ function receives a property name as input and outputs the corresponding value from the Tailwind CSS theme.

Syntax

theme(<property-name>)
theme('colors.blue.500')   // For example

Note: In the above syntax, the nested colors can be accessed using dot notation by passing the color as an argument. To adjust the opacity value of the colors, you can use a slash (/) followed by the opacity value of the color you want to use. For example: colors.gray.800 / 50%

Using the “theme ( ) ” function

The theme ( ) function in Tailwind CSS is an effective tool that lets you access the color scheme, spacing values, and other attributes of the framework directly from within your CSS code. This makes it simple for you to produce designs that are visually appealing and consistent.

Example 1: In this example, we will implement the code Using the “theme” function.

HTML

<!doctype html> 
<html> 
  
<head> 
    <link href="/dist/output.css"
          rel="stylesheet"> 
</head> 
  
<body> 
    <div class="flex flex-col gap-5 p-8"> 
        <h1 class="text-4xl font-bold"> 
            GeeksforGeeks 
        </h1> 
        <h4 class="text-xl font-semibold"> 
            Can tailwind colors be referenced from CSS? 
        </h4> 
        <p> 
            Tailwind CSS comes with a lot of utility 
            classes and pre-defined colors. In this article, 
            we are going to learn how we can reference 
            tailwind colors from the CSS. To do so, we can 
            use the "theme" function provided by 
            tailwindcss which can be used to access your 
            tailwind config values using dot notation 
            (which includes the 
            tailwind colors as well). 
        </p> 
    </div> 
</body> 
  
</html>

CSS

@tailwind base; 
@tailwind components; 
@tailwind utilities; 
  
div { 
    width: 500px; 
    background-color: theme(colors.zinc.900); 
    color: theme(colors.emerald.500); 
}

Output:

Example 2: In this example, we have created CSS variables that our “–primary”, “–secondary” and “–bg” and stored the tailwind colors inside them based on our theme.

HTML

<!doctype html> 
<html> 
  
<head> 
    <link href="/dist/output.css" 
          rel="stylesheet"> 
</head> 
  
<body class="p-5"> 
    <h1 class="mb-5 text-4xl font-bold"> 
        GeeksforGeeks 
    </h1> 
    <h4 class="mb-5 text-xl font-semibold"> 
        Can tailwind colors be referenced from CSS? 
    </h4> 
    <button class="p-5 rounded"> 
        read now 
    </button> 
</body> 
  
</html>

CSS

@tailwind base; 
@tailwind components; 
@tailwind utilities; 
  
  
:root { 
    --primary: theme(colors.emerald.500); 
    --secondary: theme(colors.cyan.700); 
    --bg: theme(colors.emerald.900 / 30%); 
} 
  
h1 { 
    color: var(--primary); 
} 
  
h2 { 
    color: var(--secondary); 
} 
  
button { 
    background-color: var(--bg); 
}