如何在 tailwind 上重写 CSS 规则？

Question

我在figma中有以下样式：

display: flex;
flex-direction: row;
align-items: center;
padding: 10px 16px;

position: absolute;
width: 227px;
height: 40px;

/* Button/Red */

background: #E30513;
/* RedBtn */

box-shadow: 0px 4px 12px rgba(157, 84, 81, 0.44);
border-radius: 10px;

我试图为按钮重写这些样式：

  <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-xl shadow-sm text-white bg-red-600 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2">Make request</button>

但是我遇到了问题：

没有顺风 border-radius: 10px 只有 rounded-lg 或 rounded-xl。
没有padding: 10px 16px;只有this
没有相同的影子
无颜色#E30513

你能解释一下吗，在我的案例中如何使用 tailwind？

Answer 1

基本上有两种方法可以解决这个问题。

Tailwind CSSv3居然支持设置任意值

border-radius: 10px可以表示为rounded-[10px]
padding: 10px 16px可以表示为py-[10px] px-[16px]
box-shadow: 0px 4px 12px rgba(157, 84, 81, 0.44)可以表示为shadow-[0px_4px_12px_rgba(157,84,81,0.44)]
background: #E30513可以表示为bg-[#E30513]

这是您的按钮示例：https://play.tailwindcss.com/9K23furBKo

或者，如果您计划多次使用这些值，您也可以轻松扩展 Tailwind CSS 配置。

以下是相关文档页面的链接：

Answer 2

这是您可以使用 Arbitrary values

直接从 tailwind 类执行此操作的方法

<script src="https://cdn.tailwindcss.com"></script>

<button 
type="submit" 
class="flex flex-row items-center py-[10px] px-[16px]
       absolute w-[227px] h-[40px] bg-[#E30513]
        shadow-[0px_4px_12px_rgba(157,84,81,0.44)]
        rounded-[10px] 
      ">

  Make request
</button>

如何在 tailwind 上重写 CSS 规则？

How to rewrite CSS rules on tailwind?

tailwind-css

tailwind-ui

tailwind-in-js

tailwind-3