标签: tailwind-css

我正在尝试使用 Tailwind CSS 将红色圆形按钮中的“x”居中。我尝试了很多 css 但没有任何效果。什么可以解决它？

https://play.tai​​lwindcss.com/Wz54NCHCI8

<button type="button" class="flex justify-center select-none bg-red-500 border-2 text-white
      text-xl font-bold p-2 m-2 rounded-full shadow h-20 w-20 focus:outline-none
      focus:shadow-outline"><img src="/icons/x.svg" alt="" width="40" h="40" class="icon svelte-1iu276v"></button>

刚刚开始在Next.js项目中使用tailwindcss。

我通过 CSS 文件进行设置，并尝试为 headers 设置一些基础知识h1，h2...但我喜欢稍微分离逻辑，这样它就不会变得太混乱，所以我尝试“@import”。/ typography.css' 其中包含一些顺风，但它不起作用。

这是我的基本 CSS 文件：

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

@import './typography.css';

我的排版：

h1 {
    @apply text-6xl font-normal leading-normal mt-0 mb-2;
}
...

关于如何让它发挥作用有什么想法吗？

更新

我试过了：

• 添加@layer base到我的typography.css 文件中，但收到错误：Syntax error: /typography.css "@layer base" is used but no matching @tailwind base
• 还尝试在导入层执行此操作，例如@layer base { @import("typography.css") }，这不会产生错误，但不会应用样式。

v3.0.18我在 pug 文件中使用 Tailwind CSS 任意值时遇到问题。我遵循了这个答案，但它没有解决问题。

这是我的哈巴狗文件：

.container.mx-auto.flex.items-center.space-x-1
  .box.p-8.bg-yellow-800.text-white(class="w-1/2")
    h1.font-bold(class='text-2xl') It's normal
  .box.p-8.bg-yellow-800.text-white(class="w-[50%]")
    h1.font-bold(class='text-\[40px\]') It Doesn't Work

那么，在 pug 中应用 Tailwind CSS 任意值的正确方法是什么？

我正在使用 Tailwind v3。

我有一个自定义背景颜色，通过 javascript 以内联样式应用：

<div style="background-color: RANDOM_GENERATED_COLOR" />

但是在移动断点中，我希望它忽略这个背景颜色，我想要没有背景。所以我所做的是添加!bg-transparent，使用“！” 修饰符我让它覆盖内联样式：

<div style="background-color: RANDOM_GENERATED_COLOR" class="!bg-transparent" />

但是，我不希望在所有其他断点sm及以上断点处覆盖内联样式。

是否可以!bg-transparent仅针对移动断点？

我创建了一个 Angular 库，其样式使用 Tailwind 进行设计。然后将其推送到 NPM，然后导入到新项目中，但 css 未得到应用。我在 tailwind.config.ts 中引用了节点模块路径：

    content: [
    "./src/**/*.{html,ts}",
    './node_modules/components-name/**/*.{html,js,ts}'
  ],

我缺少什么？

如果我将 Tailwind 直接应用到新应用程序，则它可以正常工作，但它不适用于导入的库。

Tailwindcss 文档（v3）讨论得inset box shadow非常简短，以至于我找不到将自定义插入框阴影应用到元素的方法。也shadow-inner-[0px_-2px_4px_rgba(0,0,0,0.6)]不起作用。只有默认值shadow-inner适用于该元素。有没有办法将自定义阴影内部应用到元素？或者如何在tailwind.config.js文件中定义自定义文件？

我正在开发一个使用EJS作为模板引擎的Node.js Express项目。我正在 Intellij Ultimate Edition 上开发这个。Intellij 的 tailwind css 插件已安装。我使用 tailwindcss v3 作为我的 css 框架。我遵循了他们的入门指南，并使用 Tailwind CLI 作为我的安装方法。

module.exports = {
  mode: 'jit',
  content: ['./views/*.ejs'],
  theme: {
    extend: {},
  },
  plugins: [],
};

@tailwind base;
@tailwind components;
@tailwind utilities;