How to Add New Colors in Tailwind CSS ?

How to use calc() in Tailwind CSS?

Last Updated : 11 Jan, 2025

The calc() function in CSS allows you to perform calculations for property values dynamically. While Tailwind CSS doesn’t directly support calc(), you can use it inline or with custom utilities.

1. Using Inline Styles

You can use calc() directly within the style attribute for dynamic property values.

HTML

<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="h-screen flex items-center justify-center
             bg-gray-200">
    <div style="width: calc(100% - 50px);" class="bg-blue-500
         text-white p-5">
        Width is 100% minus 50px
    </div>
</body>
</html>

In this Example:

Inline style is used to apply the calc() function to set a dynamic width.
Tailwind classes like bg-blue-500 and p-5 are combined with the inline style.

2. Using Arbitrary Values

Tailwind CSS supports arbitrary values using square brackets, allowing you to integrate calc() directly into your classes.

HTML

<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="h-screen flex items-center justify-center
             bg-gray-200">
    <div class="w-[calc(100%-50px)] bg-green-500
                text-white p-5">
        Width is 100% minus 50px
    </div>
</body>
</html>

The w-[calc(100%-50px)] utility sets the width using the calc() function within Tailwind's arbitrary value syntax.
This method avoids inline styles, keeping the code clean and consistent with Tailwind's utility-first approach.

How to Add New Colors in Tailwind CSS ?

C

coder123456778

Improve

Article Tags :

Similar Reads

How to use :not() in Tailwind CSS ?

In Tailwind CSS, the :not() selector is used to exclude specific elements from a set of CSS rules. It allows you to apply styles to all elements except those that match the specified selector, providing greater control and precision in styling complex layouts.CDN link:<script src="https://cdn.tai

How to use @apply directive in Tailwind-CSS ?

Tailwind CSS is a popular utility-first CSS framework. It is a set of pre-defined CSS classes that can be used to quickly and easily style your HTML elements without having to write custom CSS code. The classes are organized into a set of utility classes that can be used to control the layout, spaci

How to use Diagonal Fractions in Tailwind CSS ?

Tailwind CSS diagonal-fractions utility allows you to display numbers separated by a slash as common diagonal fractions. This activates those sets of figures where the numerator and denominator appear small and are separated by a slash. Syntax:<element class="diagonal-fractions"> Content </

How to Add Tailwind CSS to HTML ?

Tailwind CSS is a utility-first framework offering pre-defined classes for rapid styling of HTML elements. It simplifies customization and accelerates web development workflows.Integration Options:CDN Integration: Quickly add Tailwind CSS via a CDN link in the <head> of your HTML.Using npm: In

How to Add New Colors in Tailwind CSS ?

Tailwind CSS is a popular utility-first CSS framework that offers a wide range of pre-designed styles and classes to simplify the process of styling web applications. However, the default set of colors provided by Tailwind may not always meet the requirements of your project. In such cases, you may

How to use Google Fonts in Tailwind CSS?

Google Fonts in Tailwind CSS enhances webpage design with free and easy-to-use fonts. It provides a library of 1000+ fonts served by Google servers.Add the Google Fonts API link to your HTML file's <head>.Configure tailwind.config.js to include the font under fontFamily.Tailwind comes with thr

How to Skew a Button in Tailwind CSS?

Skewed buttons can add a dynamic and modern look to your website, Tailwind CSS provides utility classes to easily apply 2D transformations like tilt, rotation, and scaling, we'll explain how to tilt, buttons using Tailwind CSS and create a simple project to demonstrate this.Approach To Skew A Button

How to use Radial Gradient in Tailwind CSS ?

A radial gradient is a graphical effect where colors transition in a circular or elliptical pattern. By default, the first color starts at the center and fades out to the edge of the element. Tailwind CSS makes it easy to implement radial gradients with its utility classes. We can use the below appr

How to use Tailwind @apply in CSS Modules in Next.js ?

In Next.js, you can enhance CSS Modules by integrating Tailwind's @apply directive. This approach combines Tailwind's utility classes with modular CSS, ensuring scoped styling and efficient management across your application.We can integrate Tailwind's @apply directive in CSS Modules of Next.js by i

How to use CSS Animations with Tailwind CSS ?

Tailwind CSS classes are used to style elements and apply animations effortlessly. Utilize Tailwind's animation utility classes to add dynamic visual effects. Combine Tailwind CSS with custom CSS animations for versatile and engaging web designs. Table of Content Tailwind CSS Animation Utility Class