How to use the “theme ( ) ” function In CSS
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" > w3wiki </ 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" > w3wiki </ 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:
Can Tailwind colors be referenced from CSS ?
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.
Contact Us