标签: tailwind-css

如何在 Django 项目（不仅是 CDN）中使用 TailwindCSS 的所有功能，包括具有自动重新加载的干净工作流程，以及用于生产就绪的 purgeCSS 步骤？

在谷歌搜索时，我发现了一个名为 django-tailwind 的 python 包，但它在这个过程中并没有真正帮助我。

如何实现 rgba(0, 0, 0, 0.54) tailwind css 的文本颜色。我尝试过 text-black-500、text-current 和许多其他变体，但无法实现 rgba(0, 0, 0, 0.54) 的颜色。

我通过执行以下操作在所有边缘上设置了边框：

这实际上是一个错误，但在提出问题时，我相信我可以使用以下代码仅在顶部画一条线。（实际上，线条是在所有边缘上绘制的。）

<div class="border border-blue-900 border-t-1">foo</div>

我只想在一侧显示它，所以我做了一些研究。我注意到当我使用borderin时tailwindcss，输出文件中输出了以下内容。

/**

• 1. 防止内边距和边框影响元素宽度。
• 我们曾经在 html 元素中设置它并继承自
• 其他所有内容的父元素。这引起了问题
• 在 Shadow-dom 增强的元素中，例如内容
• 由一个 div 包裹，且 box-sizing 设置为content-box。
• https://github.com/mozdevs/cssremedy/issues/4
• 2. 允许仅通过添加边框宽度来向元素添加边框。
• 默认情况下，浏览器指定元素不应该有的方式
• none边框是通过在用户代理中将其边框样式设置为
• 样式表。
• 只需设置即可轻松为元素添加边框border-width
• 属性，我们将所有元素的默认边框样式更改为solid, 和
• 使用 border-width 来隐藏它们。这样我们的border公用事业就只剩下
• 需要设置border-width属性而不是整个border
• 速记，使我们的边界实用程序更容易编写。
• https://github.com/tailwindcss/tailwindcss/pull/116 */

此输出的原始版本来自 https://github.com/tailwindlabs/tailwindcss/blob/723e8d4377eb25b66a6224f767937fa02762eb52/src/plugins/css/preflight.css#L71

我想这可能就是原因。我通过编写以下内容成功地将其仅应用到顶部边缘。

<div class="border border-blue-900 border-t-1 border-l-0 border-r-0 border-b-0">foo</div>

然而，这太长了。有什么办法可以让它变短吗？

注意：我也在考虑以下替代方案。

如何将其作为 JIT 中的参数？

这样，我还可以调整宽度（不是边框中的宽度，是 for display: block）。

我想做的只是将其显示在任意一侧，因此上面的链接试图将其显示在底部。（换句话说，无论是在顶部、底部还是其他任何地方，这只是一个例子。）

所以插件的描述是它会在处理标记时显示类的建议，但它没有。我已经无数次重新加载了插件。我什至重新启动了 vscode 并最终重新安装了它。当然，我做了 npm install tailwind 和其他所需的实用程序......如果这有助于回答我的问题，我什至在我的项目中有我的 tailwind.config.js 文件。谢谢你。

全部，

我正在尝试使 tailwinds backgroundImage 解决方案发挥作用，并且我在此处或 github 上找到了许多其他 tailwindcss 问题的帮助，但不适用于此。这不是一个复杂的任务，但仍然行不通。正如文档中一样，我想创建 2 个简单的背景图像以用于多个视图大小。文档https://tailwindcss.com/docs/background-image中指出“默认情况下，仅为背景图像实用程序生成响应式变体。” 这意味着，无需对变体进行任何进一步配置，我应该能够将其用于此目的。

这是我的 tailwind.conf.js 的样子（重要部分在最后）：

const plugin = require('tailwindcss/plugin')
module.exports = {
    purge: [
      "./pages/**/*.vue",
      "./components/**/*.vue",
      "./plugins/**/*.vue",
      "./static/**/*.vue",
      "./store/**/*.vue"
    ],
    theme: {
        extend: {
            minHeight: {
                '120': '30rem',
            },
            height: {
                '15': '3.75rem',
                '17': '4.25rem',
                '7': '1.75rem',
                '75': '18.75rem',
            },
            width: {
                '15': '3.75rem',
                open: '11.875rem',
                '75': '18.75rem',
            },
            margin: {
                '7': '1.75rem',
                '17': '4.25rem',
                '27': '6.75rem',
            },
            padding: {
                '7': '1.75rem',
            },
            borderWidth: {
                '5': '5px',
            }, …

我有一个从 API 获取的图像 url，我想将其显示为背景图像。有什么方法可以用 tailwindcss 实现这个或者我应该使用 styles 属性吗？

我正在尝试在我的 nuxt 项目中安装 Tailwindcss

我使用 nuxt https://v3.nuxtjs.org/getting-started/installation的全新安装

npx nuxi init nuxt3-app

并按照 tailwindcss 安装

https://tailwindcss.com/docs/guides/nuxtjs

但是当我启动应用程序时npm run dev我收到此错误

ERROR  Cannot restart nuxt:  postcss@8 is not compatible with current version of nuxt (0.0.0). Expected: >=2.15.3   

我不知道如何解决它，并且在网上找不到任何答案，我感谢您的帮助，谢谢

我已经下载了一些字体（不是 GOOGLE FONTS），我想在我的 Nextjs 13 Tailwind 项目中添加和使用它们。

我已按照 Nextjs 文档尝试添加单一字体（我想添加多种字体，但尝试添加单一字体不起作用）：

1. npm 安装@next/font
2. 将下载的字体文件添加到/pages/fonts
3. 将字体添加到/pages/_app.js
4. 将字体添加到tailwind.config.js
5. 在组件中使用字体

更新了/pages/_app.js

import localFont from '@next/font/local'

const surt = localFont({
  src: './fonts/Surt-Normal-Bold.woff2',
  variable: '--font-surt-bold',
})

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={surt.variable}>
      <Component {...pageProps} />
    </main>
  )
}

更新了 tailwind.config.js（Surt 是无衬线字体）

const { fontFamily } = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-surt)', ...fontFamily.sans],
      },
    },
  }, …

使用 TailwindCSS 我试图适应<div>它的孩子的高度，a <button>。我的代码如下：

<form className="w-full flex h-96 gap-2 mt-8 flex-wrap">
     <textarea
          role="text-input"
          className="resize-none flex-1"
          placeholder="INPUT"
     />
     <textarea
          role="text-output"
          className="resize-none flex-1"
          placeholder="OUTPUT"
          readOnly
      />
      <div className="w-full flex flex-none"> // This is the troublesome div
          <button>
                Submit!
          </button>
      </div>
</form>

阅读文档并进行谷歌搜索，我似乎找不到一种方法来做到这一点，理想情况下，我想设置一个类，例如h-fit-content（类似这样的东西），但它似乎不存在。

提前致谢！

我试图通过tailwind.config.js扩展编写一些主题来在我的项目中使用 Tailwind 自定义颜色。

module.exports = {\n  content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],\n  theme: {\n    extend: {\n      colors: {\n        s2condPurple: '#a32eff',     // works \xe2\xad\x95\xef\xb8\x8f\n        s2condPink: '#ff0099',       // works \xe2\xad\x95\xef\xb8\x8f\n        s2condOrange: '#ff5f55',     // works \xe2\xad\x95\xef\xb8\x8f\n        s2condYellow: '#ffe600',     // doesn't work \xe2\x9d\x8c\n        s2condLime: '#cdff64',       // works \xe2\xad\x95\xef\xb8\x8f\n        s2condMint: '#2af1b5',       // works at 'text-s2condMint' but not at 'border-s2condMint'\n        secondTest: '#ffe600',       // works \xe2\xad\x95\xef\xb8\x8f <-- I tested it for s2condYellow but it works perfectly!\n        s2condTest2: '#2af1b5',      // doesn't work \xe2\x9d\x8c\n        ...\n      },\n      \n    },\n  },\n …