我有一个 Rails 6 应用程序设置为将Tailwind CSS与 Webpacker一起使用，这与 GoRails 教程中的做法类似。

我希望能够根据控制器和操作动态更改 Tailwind 默认值，以便用户通过选择一些选项然后动态调整一些 Tailwind 配置选项来轻松“皮肤”站点的部分。（如何使用它的一个例子是用户登录网站的管理区域，更改他们的字体系列和背景颜色以匹配他们的品牌。）

我不能仅仅根据条件将样式表添加到布局中，因为我必须覆盖我想要更改的 Tailwind css 变量的所有实例（例如“sans-serif”）。随着 Tailwind 的发展，这将需要大量工作并且难以维护。

如果有一种方法可以将用户选择的选项动态插入到 Tailwind 配置文件 ( /javascript/stylesheets/tailwindcss-config.js ) 中，那将是理想的，但我不确定如何执行此操作。

使用 Tailwind 时，是否有更好的方法在 Rails 中执行此操作？似乎应该有某种方法可以使用控制器中的 Javascript 来动态更改我的 tailwindcss-config.js 中的设置（这里解释了Tailwind 配置文件）。因此，该文件中的内容如下：

theme: {
    fontFamily: {
      display: ['Gilroy', 'sans-serif'],
      body: ['Graphik', 'sans-serif'],
    },

在 Tailwind 中硬编码为配置的字体堆栈会变成这样：

theme: {
    fontFamily: {
      display: DYNAMICALLY INSERTED FONT STACK,
      body: ANOTHER DYNAMICALLY INSERTED FONT STACK,
    },

你将如何在 Rails 中做到这一点？我的 Tailwind 配置文件位于 /javascript/stylesheets/tailwindcss-config.js。这可能与 Rails 中的 …

我正在使用 TailwindCSS 并想更改 svg 的颜色。如果没有 Tailwind，这里之前已经问过这个问题，对于 2020 年，这应该是一个很好的答案，但 Tailwind 不支持这些过滤器。文档中有一个关于如何使用 svg 图标的指南，但本教程没有文件，只有纯文本路径。

我下载了 svg 文件并将 svg 的路径分配给图像的src标签。以下示例显示了我的问题，我希望图标的背景为红色，图标的颜色为蓝色。不幸的是，我无法更改图标颜色。

<link href="https://unpkg.com/tailwindcss@1.8.10/dist/tailwind.min.css" rel="stylesheet" />

<!-- taken from here https://www.iconfinder.com/icons/765208/media_twitter_social_icon -->
<img class="fill-current bg-red-500 text-blue-500" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI2MHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA2MCA2MCIgd2lkdGg9IjYwcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0iYmxhY2siIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIj48ZyBpZD0ic2xpY2UiLz48ZyBmaWxsPSIjMDAwMDAwIiBpZD0idHdpdHRlciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTMuMDAwMDAwLCAxNi4wMDAwMDApIj48cGF0aCBkPSJNMjguMDUyMTM4NSwyLjQzNjY5NDI3IEMyNi44NDMxODQ2LDEuMDYyMjAxNSAyNS4xMjA1Mzg1LDAuMTg2NDY0MTA1IDIzLjIxNDA2MTUsMC4xNTQ3MzEwMjggQzE5LjU1MzYsMC4wOTM4MDMwOTA1IDE2LjU4NTY1MzgsMy4xODY5MjMzOSAxNi41ODU2NTM4LDcuMDYzMTE2MDQgQzE2LjU4NTY1MzgsNy42MTMyNDExOCAxNi42NDQyOTIzLDguMTQ5NjkzMzcgMTYuNzU3MzY5Miw4LjY2NDY3MzE2IEMxMS4yNDg1ODQ2LDguMzA3MzUyNTcgNi4zNjQ0NjkyMyw1LjQzODc3MDU5IDMuMDk1NDE1MzgsMS4xMTQ3MjE4IEMyLjUyNDg2MTU0LDIuMTUwODYxNyAyLjE5NzkwNzY5LDMuMzYxODgyNzEgMi4xOTc5MDc2OSw0LjY1OTE1MDM3IEMyLjE5NzkwNzY5LDcuMTE0OTg4NDQgMy4zNjgwOTIzMSw5LjI5NDUyNzI0IDUuMTQ2NjMwNzcsMTAuNTgxNDE3NCBDNC4wNjAxMjMwOCwxMC41MzM0NDk5IDMuMDM4MDY5MjMsMTAuMjA0NTM3OCAyLjE0NDQzODQ2LDkuNjY0OTUyMDMgQzIuMTQzNzkyMzEsOS42OTQ0NDQ5NyAyLjE0Mzc5MjMxLDkuNzIzOTQ0OTQgMi4xNDM3OTIzMSw5Ljc1Mzk2MjQ1IEMyLjE0Mzc5MjMxLDEzLjE4MzU0OTcgNC40Mjg1OTIzMSwxNi4wNjA3MDc2IDcuNDYwODMwNzcsMTYuNzMwOTM4MyBDNi45MDQ2NTM4NSwxNi44ODg1MzggNi4zMTkwNzY5MiwxNi45NzEwMTYzIDUuNzE0NiwxNi45NjcwMDggQzUuMjg3NDkyMzEsMTYuOTY0MTc1OCA0Ljg3MjE3NjkyLDE2LjkxNjgxMTggNC40Njc1MjMwOCwxNi44MzE3NjggQzUuMzEwOTE1MzgsMTkuNjQ0Mzc3NyA3Ljc1ODcwNzY5LDIxLjY5Njc2NjMgMTAuNjU5MjkyMywyMS43NjQ2MjggQzguMzkwODA3NjksMjMuNjQ3Njk2MyA1LjUzMjg2OTIzLDI0Ljc2OTE5MzMgMi40MjcyOTIzMSwyNC43NjI3ODcgQzEuODkyMjc2OTIsMjQuNzYxNjgzMyAxLjM2NDY5MjMxLDI0LjcyNzExMiAwLjg0NjE1Mzg0NiwyNC42NjA1OTk2IEMzLjc3OTUzMDc3LDI2LjY3MzMxMzkgNy4yNjM1OTIzMSwyNy44NDUxNzExIDExLjAwNjc2MTUsMjcuODQ2MTUzMSBDMjMuMTk4NTUzOCwyNy44NDkzNTE4IDI5Ljg2NTczMDgsMTcuMjM5NTEwOSAyOS44NjU3MzA4LDguMDM2NzY4NjggQzI5Ljg2NTczMDgsNy43MzQ4MzYzMiAyOS44NTkxMDc3LDcuNDM0NTE5MTIgMjkuODQ2NTA3Nyw3LjEzNTY1MTk1IEMzMS4xNDE1NjE1LDYuMTcwNjY2NDUgMzIuMjY1MjIzMSw0Ljk2MDc4OTE1IDMzLjE1Mzg0NjIsMy41NzkyMTkwMSBDMzEuOTY1MjQ2Miw0LjExNTAxNjE1IDMwLjY4NzYzODUsNC40NzA4Njg2MyAyOS4zNDcwMzA4LDQuNjIwMTM3ODkgQzMwLjcxNTQyMzEsMy43Nzc5NjUxOCAzMS43NjY1NTM4LDIuNDMwMDk2MDcgMzIuMjYxMzQ2MiwwLjgxMzc1ODQwNCBDMzAuOTgwNTA3NywxLjU5MDQ5MjI5IDI5LjU2MjAzODUsMi4xNDc1MTI4NiAyOC4wNTIxMzg1LDIuNDM2Njk0MjcgWiIvPjwvZz48L2c+PC9zdmc+">

下载 svg 图标并通过链接资产路径直接使用它们时，正确的工作流程是什么？我想要实现的就是这样的

<a href="https://twitter.com" target="_blank">
  <img src="pathToSvgInAssetsFolder" />
</a>

并将图标颜色设置为自定义 Tailwind 颜色，例如red-500。因此，每当我想更改图标颜色时，我都可以简单地修改颜色类。

有人知道怎么做吗？

我在 React 中使用 Tailwind CSS，并尝试为我的图像 div 设置 500px 的宽度。但div的宽度增加不会超过300px。

<div className="flex flex-row gap-4 mb-12">

    <div className='images px-6 basis-0'>

        <div className=' img bg-primary mb-4 w-[300px] h-[300px]'>
        </div>

        <div className=' img bg-primary mb-4 w-[300px] h-[300px]'>
        </div>

        <div className=' img bg-primary mb-4 w-[300px] h-[300px]'>
        </div>

    </div>

    <div className='product_info basis-0'>
        ...
    </div>

</div>

当我将自定义类中的宽度从 300px 更改为 500px 时，框就消失了：

如果我使用 CSS 手动调整宽度和高度，效果很好。

.img{
  width: 500px;
  height: 300px;
}

我不明白是什么导致了这个问题:(

我想创建一个带有 tailwind css 的网格，其中第一列非常窄，第二列非常宽。通常我发现顺风文档非常直观，但我不理解这个。使用grid-cols-{n}我可以创建相同大小的列，但我不明白如何创建不同大小的列。我该怎么办？

我必须并排放置两列。其中一列具有固定宽度。我真的很努力地理解为什么一列中的固定宽度在 Tailwind CSS flexbox 上不起作用。

我有以下代码：

<div class="flex flex-row justify-between items-start shrink-0">
    <p class="mt-4 h-14 overflow-hidden leading-7">This title pushed back the next element</p>
    <div class="p-1 w-16 h-16 text-white text-center">
        <p class="text-sm">05</p>
        <p class="text-3xl leading-none font-bold">JUNE</p>
    </div>
</div>

顺风版本：3.0.23

输出：

检查元素：

预期输出：

我使用 Angular 15 和 Angular Material 15，然后按照说明添加了 Tailwind CSS https://tailwindcss.com/docs/guides/angular

材料组件设计不匹配，如下所示

占位符名称被按应有的方式截断

该行出现在文本框中。

在 style.scss 中

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

顺风配置

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
    ],
  theme: {
    extend: {},
  },
  plugins: [],
}

下一个/字体

将 Next.js 与 TypeScript 和 Tailwind CSS 结合使用

这是我第一次使用新next/font软件包。我遵循了 Next.js 的教程，它很容易设置。我正在使用 Inter 和名为 App Takeoff 的自定义本地字体。为了实际使用这两种字体，我使用 Tailwind CSS，其中 Inter 连接到font-sans，App Takeoff 连接到font-display。

除一处外一切正常

我已经在文件之间进行了大量的测试，并且出于某种原因，除了我的Modal组件之外，两种字体都可以在任何地方使用。（请参阅底部的“有用更新”以了解它在组件中不起作用的原因Modal。）

例子

索引.tsx

modal.tsx 通过 index.tsx

正如您所看到的，当字体不在模式中时，它们工作得很好，但是一旦它们在模式中，它们就不起作用。

这是一些相关代码：

// app.tsx\n\nimport \'@/styles/globals.css\'\nimport type { AppProps } from \'next/app\'\n\nimport { Inter } from \'next/font/google\'\nconst inter = Inter({\n  subsets: [\'latin\'],\n  variable: \'--font-inter\'\n})\n\nimport localFont from \'next/font/local\'\nconst …

我正在使用以下技术组合：

• SvelteKit（1.5.0，使用TypeScript），以Vite（4.0.0）作为SvelteKit自带的构建工具）
• Svelte adapter-static(2.0.1) 用于发布到 GitHub Pages
• TailwindCSS与 Typography 插件
• Inter字体系列来自import '../inter.css';in+layout.svelte

运行时npm run build我收到一堆警告（为了可读性换行：

/img/logo.png referenced in D:/git/my-org/my-repo/src/app.css
  didn't resolve at build time, it will remain unchanged to be resolved at runtime

/fonts/Inter-Thin.woff2?v=3.19 referenced in D:/git/my-org/my-repo/src/inter.css
  didn't resolve at build time, it will remain unchanged to be resolved at runtime

对我个人而言，构建输出实际上有效，并且包含所有所述资源。另外，如果我删除输出文件夹并生成一个全新的构建。我没有遇到任何问题或错误。但输出对我来说就像是警告，并且“警告是来自未来的错误”！

所以，我的问题是：上面的这条消息是什么意思，我应该将其视为警告并进行更改吗？

如何重现（使用Svelte）

这是重现上述警告的一种方法：

1. npm create svelte@latest my-app，参见 …

我有以下元素：

<td class="min-w-[10rem] max-w-[10rem] overflow-ellipsis text-sm text-text-light px-3 min-w-0"></td>

它的所有类名都是通过组件自动生成的，除了最后一个min-w-0.

由于min-w-0是列出的最后一个类名，我希望它会覆盖min-w-[10rem]列出的第一个类名。

然而，由于某种原因，min-w-[10rem]似乎优先。

来自 Chrome 开发工具：

关于原因以及如何解决它有什么见解吗？

谢谢！

Shadcn UI ( https://ui.shadcn.com/ ) 工作正常，直到我只工作了几周，直到昨天，当我在本地主机中运行我的 NextJS 应用程序时，所有顺风车都不起作用。为了调试这个问题，我在一个全新的文件位置创建了一个空白的 NextJS 13 应用程序，一切正常；tailwind 正在默认的 nextJS 13 页面上工作。然后我跑了

npx shadcn-ui init

无需安装任何组件。它没有吐出任何错误，但随后顺风样式不再起作用。

注入后我的tailwind.config.js：

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: …