- Instant help with your CSS coding problems

How to use calc() in TailwindCSS

Snippet added on Jun 06, 2023 by Mike

Question:

How to use calc() in TailwindCSS?

Answer:

/* Set top margin depending on screen height */
<div class="mt-[calc(100vh_/_5)]">

Description:

calc() is a commonly used CSS function. It's useful if you want to dynamically change the position of individual components.

For TailwindCSS it is very important that space characters are not allowed in the expression. So, unlike normal CSS, you either have to type everything without space or use underscore characters instead of space characters.

So calc(100vh / 5) becomes calc(100vh/5) or calc(100vh_/_5)

For example, if you want a modal dialogue window to be displayed closer to the top of the screen than in the middle. Since we don't know the client screen resolution in advance, the value of the top margin has to be calculated dynamically.

<div class="fixed bg-slate-400 bg-opacity-70 top-0 bottom-0 left-0 right-0 flex justify-center">
	<div class="p-5 bg-white rounded w-96 h-24 shadow mt-[calc(100vh_/_5)]">Dialog</div>
</div>

The result is:

Reference:

CSS calc() function reference

Share "How to use calc() in TailwindCSS?"

Related snippets:

Tags:

css, calc, tailwind, use, dynamic, value, calculation, depending, screen

Technical term:

How to use calc() in TailwindCSS

Trending articles

Use clip path in TailwindCSS Set focus border in TailwindCSS Create hover underline animation in TailwindCSS Truncate text in TailwindCSS Create triangles with TailwindCSS Create custom toggle button with TailwindCSS Implement Dark mode with TailwindCSS How to create custom checkboxes in TailwindCSS Fix the Unknown at rule @tailwind warning in VSCode Fix TailwindCSS breaks existing styles

Trending snippets

Remove focus border around input element Create endless rotation animation in CSS Center an absolute element in TailwindCSS How to use !important in TailwindCSS Add class to child when hovering on parent in TailwindCSS Add a box shadow to only one side of an element Add text shadow with Tailwind CSS Add dots if text is too long Create a neon effect with TailwindCSS Access child elements in TailwindCSS Select the nth child in TailwindCSS Change bullet size in HTML Force line break in a long word using CSS Select first child in TailwindCSS Use emoji instead of list style How to use calc() in TailwindCSS How to use CSS variables in TailwindCSS Create horizontal rule with text using TailwindCSS Using :not in TailwindCSS Write vertical text in HTML

Network articles

Fix the ReactDOM.render is no longer supported in React 18 How to run useEffect only once in React Save Chrome console.log to file Check if a string is empty in JavaScript Fix the object passed as the value prop to the Context provider changes every render Remove duplicate lines in Notepad++Array and string offset access syntax with curly braces is no longer supported Search for file in VS Code Group by year of Unix timestamp in MySQL Check if string ends with slash using JavaScript Convert string to kebab case in JavaScript Convert a float number to integer in JavaScript Select HTML elements by CSS selectors in vanilla JavaScript Solving the Error: Must use import to load ES Module Move line up or down in VS Code Add days to date in PHP Backup only certain rows from MySQL database Get current time in PHP PHP array length Find MySQL data directory location

Interesting things

OpanAi's ChatGPT