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% );
}
h 1 {
color : var(--primary);
}
h 2 {
color : var(--secondary);
}
button {
background-color : var(--bg);
}
|
Output:
Share your thoughts in the comments
Please Login to comment...