How to use calc in tailwind css

在 Tailwind CSS 中，可以通过几种方式使用 CSS 的 calc() 函数来创建动态的属性值。这包括内联样式、自定义 CSS 类和使用 Tailwind 的 Arbitrary Values 功能。以下是如何在 Tailwind CSS 中使用 calc() 函数的详细指导：

结合 Tailwind CSS 配置

在 Tailwind CSS 的配置文件中添加自定义宽度：

javascript
// tailwind.config.js
module.exports = {
  // ...
  theme: {
    extend: {
      width: {
        'calc-example': 'calc(100% - 2rem)',
      },
    },
  },
  // ...
};

然后在 HTML 中使用这个新的配置类：

html
<div class="w-calc-example ...">
  <!-- 内容 -->
</div>

使用 Tailwind 的 Arbitrary Values

Tailwind 支持在类名中使用方括号 [] 来内联写入任意值（包括 calc() 函数）：

html
<div class="w-[calc(100%_-_2rem)] ...">
  <!-- 内容 -->
</div>

注意，在 calc() 内部的空格需要使用下划线 _ 来表示，这是因为在 Tailwind CSS 中使用 Arbitrary Values 时，如果值包含空格或其他特殊字符，则必须适当转义它们。

以上就是在 Tailwind CSS 中使用 calc() 函数的几种方法。使用 calc() 时，请确保在操作符号前后留有空格，以避免解析错误。

不要在calc中加空格

shell
class="w-[calc(100%+2rem)]"

输出内容:

shell
.w-\[calc\(100\%\+2rem\)\] {
  width: calc(100% + 2rem);
}

或者可以使用下划线代替空白

shell
<script src="https://cdn.tailwindcss.com"></script>
<div class="h-20 w-[calc(100%_-_10rem)] bg-yellow-200"></div>

我们也可以使用主题变量

shell
h-[calc(100%-theme(space.24))]

theme()

使用theme()函数使用点表示法访问Tailwind配置值。

当您希望仅为声明的一部分引用主题配置中的值时，这可能是@apply的有用替代方案

shell
.content-container {
  height: calc(100vh - theme('spacing.7'));
}