How to apply Dynamic Styles using Tailwind CSS?

Last Updated : 21 Aug, 2024

Tailwind CSS helps you style your website easily by using simple classes. Sometimes, you might need to change these styles based on different conditions, like when a button is clicked.

Below are the approaches to apply dynamic styles using Tailwind CSS:

Table of Content

Using Inline Styles
Using CSS Custom Properties

Using Inline Styles

The first way is to use inline styles. This means you use JavaScript to create styles on the fly and directly apply them to your component.

Example: Index.html: Index.html file is a Html file having a basic boiler plate followed by a script tag having linking with tailwind CSS along with script.js file.

HTML

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
     content="width=device-width,
      initial-scale=1.0">
    <title>Dynamic Styles with Tailwind CSS</title>
    <link rel="stylesheet" href="
https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css">
</head>

<body>
    <div id="root">
        <!-- dynamic style will be applied here -->
    </div>
    <script src="script.js"></script>
</body>

</html>

Script.js file: Script.js file is having background color and font color for the text to be displayed. The text which will be displayed will be having a rounded border.

JavaScript

// script.js
const backgroundColor = 'red'; // or '#FF0000'
const fontColor = 'blue'; // or '#0000FF'

// Render the HTML element with the dynamic style
document.getElementById('root').innerHTML = `
  <div style="background-color: ${backgroundColor}; color: ${fontColor};" class="p-4 rounded-lg">
    Dynamic Style Applied!
  </div>
`;

In this example, we're using JavaScript to dynamically generate the background-color and color styles and apply them to the component using the style attribute.

Output:

Using CSS Custom Properties

The second way is to use CSS custom properties. You set up custom properties in your CSS file and then use JavaScript to change their values when you need to update the styles on your component.

Example:
Styles.css file: It is a global CSS file added in order to give background color property having background color as red and font color property having font color as purple.

CSS

/* styles.css */
:root {
  --background-color: red; /* or '#FF0000' */
  --font-color: green; /* or '#00FF00' */
}

Index.html file: Index.html file is a Html file having a basic boiler plate followed by a script tag having linking with tailwind CSS along with script.js file.

HTML

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
     content="width=device-width,
      initial-scale=1.0">
    <title>Dynamic Styles with Tailwind CSS</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="
https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css">
</head>

<body>
    <div id="root">
        <!-- dynamic style will be applied here -->
    </div>
    <script src="script.js"></script>
</body>

</html>

Script.js file: here we are defining custom properties --background-color and --font-color in our CSS file and then using JavaScript to update the values of those properties.

JavaScript

// script.js
// Render the HTML element with the dynamic style
document.getElementById('root').innerHTML = `
  <div style=
  	"background-color: var(--background-color); 
     color: var(--font-color);" class="p-4 rounded-lg">
    Dynamic Style Applied!
  </div>
`;

Output:

Capture2 — Output using Custom CSS Properties

How to use @apply directive in Tailwind-CSS ?

emailmeay8uic

Improve

Article Tags :

How to apply Dynamic Styles using Tailwind CSS?

Using Inline Styles

Using CSS Custom Properties

Similar Reads

Thank You!

What kind of Experience do you want to share?