乐闻世界logo
搜索文章和话题

TailwindCSS 项目如何使用 calc

5 个月前提问
21 天前修改
浏览次数205

3个答案

1
2
3

在 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() 时,请确保在操作符号前后留有空格,以避免解析错误。

2024年6月29日 12:07 回复

不要在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))]
2024年6月29日 12:07 回复

theme()

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

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

shell
.content-container { height: calc(100vh - theme('spacing.7')); }
2024年6月29日 12:07 回复

你的答案