In this section we will see how to use colors variables in tailwind css, We will see simple color variable, using var variable, tailwind font size variable, setup variables in config, using rbg color variable example with Tailwind CSS 3.
Example 1
Create simple var color variables in tailwind css.
<!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>Tailwind CSS Variables Example</title>
<script src="https://cdn.tailwindcss.com"></script>
<style type="text/tailwindcss">
@layer base {
:root {
--blue: #0d6efd;
--gray: #6c757d;
--green: #198754;
--red: #ff1a1a;
}
}
</style>
</head>
<body>
<div class="flex flex-col items-center justify-center h-screen">
<h1 class="text-[color:var(--blue)] text-2xl">
Tailwind CSS text color blue using variable
</h1>
<h1 class="text-[color:var(--gray)] text-2xl">
Tailwind CSS text color gray using variable
</h1>
<h1 class="text-[color:var(--green)] text-2xl">
Tailwind CSS text color green using variable
</h1>
<h1 class="text-[color:var(--red)] text-2xl">
Tailwind CSS text color red using variable
</h1>
</div>
</body>
</html>
tailwind css color variables text
Use variable font size in tailwind css.
<!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>Use variable font size in tailwind css </title>
<script src="https://cdn.tailwindcss.com"></script>
<style type="text/tailwindcss">
@layer base {
:root {
--blue: #0d6efd;
--font-24: 24px;
--font-32: 32px;
--font-40: 40px;
}
}
</style>
</head>
<body>
<div class="flex flex-col items-center justify-center h-screen">
<h1 class="text-[color:var(--blue)] text-[length:var(--font-24)]">
Tailwind CSS font size with variable
</h1>
<h1 class="text-[color:var(--blue)] text-[length:var(--font-32)]">
Tailwind CSS font size with variable
</h1>
<h1 class="text-[color:var(--blue)] text-[length:var(--font-40)]">
Tailwind CSS font size with variable
</h1>
</div>
</body>
</html>
tailwind css font size variables
Example 2
We can also set color variables value in tailwind.config like primary, secondary, success etc.
<!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>Tailwind CSS set variable in config</title>
<script src="https://cdn.tailwindcss.com"></script>
<style type="text/tailwindcss">
@layer base {
:root {
--blue: #0d6efd;
--gray: #6c757d;
--green: #198754;
}
}
</style>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: 'var(--blue)',
secondary: 'var(--gray)',
success: 'var(--green)',
}
}
}
}
</script>
</head>
<body>
<div class="flex flex-col items-center justify-center h-screen">
<h1 class="text-primary">Tailwind CSS Primary Color with variable </h1>
<h1 class="text-secondary">Tailwind CSS secondary Color with variable </h1>
<h1 class="text-success">Tailwind CSS success Color with variable </h1>
<button class="px-2 py-2 text-sm text-white rounded bg-primary">
Button
</button>
</div>
</body>
</html>
tailwind css config variable colors
Example 3
Tailwind CSS variable with RGB colors.
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<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>Tailwind CSS variable with RGB color</title>
<script src="https://cdn.tailwindcss.com"></script>
<style type="text/tailwindcss">
@layer base {
:root {
--color-danger: 255 0 0;
}
}
</style>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
danger: 'rgb(var(--color-danger) / <alpha-value>)',
}
}
}
}
</script>
</head>
<body>
<div class="flex flex-col items-center justify-center h-screen">
<h1 class="text-danger">Tailwind CSS variable with RGB color </h1>
<button class="px-2 py-2 text-sm text-white rounded bg-danger">
Button
</button>
</div>
</body>
</html>
tailwind css use rbg color with variables
Example 4
Create button in tailwind css variable using tailwind theme color.
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<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>Tailwind CSS variable using tailwind theme color</title>
<script src="https://cdn.tailwindcss.com"></script>
<style type="text/tailwindcss">
@layer base {
:root {
--color-primary: theme(colors.blue.600);
--color-secondary: theme(colors.gray.600);
--color-success: theme(colors.green.600);
--color-danger: theme(colors.red.600);
--color-warning: theme(colors.yellow.600);
}
}
</style>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: 'var(--color-primary)',
secondary: 'var(--color-secondary)',
success: 'var(--color-success)',
danger: 'var(--color-danger)',
warning: 'var(--color-warning)',
}
}
}
}
</script>
</head>
<body>
<div class="flex flex-col items-center justify-center h-screen">
<h1 class="mb-4 text-xl text-primary">Tailwind CSS variable with theme </h1>
<div class="flex gap-4">
<button class="px-2 py-2 text-sm text-white rounded bg-primary">
Button
</button>
<button class="px-2 py-2 text-sm text-white rounded bg-secondary">
Button
</button>
<button class="px-2 py-2 text-sm text-white rounded bg-success">
Button
</button>
<button class="px-2 py-2 text-sm text-white rounded bg-danger">
Button
</button>
<button class="px-2 py-2 text-sm text-white rounded bg-warning">
Button
</button>
</div>
</div>
</body>
</html>
