标签: tailwind-css

有没有办法使用

text-overflow: ellipsis

想到了Tailwind CSS 框架

我想使用顺风约定，如：

&__title {
    @apply text-overflow-ellipsis;
}

代替

&__title {
    text-overflow: ellipsis;
}

我为一个小项目创建了一个反应设置，并决定添加顺风。它是成功的，但是当我将类添加到组件时，我没有看到任何变化。

这是存储库的链接

我有干净的 nuxt.js 项目，以 Nuxt/Tailwind 作为样式。

通过下面的配置，我应该能够在 div 或 postcss 中使用 @applytext-testred和text-testred-dark. 但是，仅text-testred-dark适用于 ，而不适用于默认值text-testred。

也text-testred-DEFAULT有效，所以它解释它是错误的，因为根据文档，它“DEFAULT”将被忽略并将被用作类的默认后缀。

nuxt.config.js

tailwindcss: {
  configPath: '~/tailwind.config.js',
  cssPath: '~/assets/css/tailwind.css'
}

tailwind.config.js

module.exports = {
  theme: {
    fontFamily:{
      sans: ["'GT Walsheim Pro'"],
      serif: ["'GT Walsheim Pro'"],
      mono: ["'GT Walsheim Pro'"],
      display: ["'GT Walsheim Pro'"],
      body: ["'GT Walsheim Pro'"]
    },
  colors: {
    // Configure your color palette here
    transparent: 'transparent',
    current: 'currentColor',
    testred: {
      lightest: '#efdfa4',
      lighter: '#f1cb8a',
      light: '#f5b575', …

我看过@adamwathan的直播，他确实className="w-5 h-5 text-white" fill="currentColor"通过 Tailwind 设计了 ​​SVG 样式。

我怎样才能为 做同样的事情linearGradient？

我有以下 SVG：

import React from 'react'

export const LinearGradient = () => (
    <svg className="w-5 h-5" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <linearGradient x1="50%" y1="92.034%" x2="50%" y2="7.2%" id="a">
                <stop offset="0%" />
                <stop stopOpacity="0" offset="100%" />
            </linearGradient>
        </defs>
        <circle
            className="text-white"
            stroke="currentColor"
            fill="url(#a)"
            cx="8.5"
            cy="8.5"
            r="6"
            fillRule="evenodd"
            fillOpacity=".8"
        />
    </svg>
)

如何linearGradient在 SVG 中设置fill="url(#a)"完美使用的样式？我无法更改，fill="currentColor"因为它将失去对 的引用id="a"。

原始 SVG 位于 …

我一直在尝试在我的项目中借助 Tailwind 添加背景图片，但它不起作用，我猜是因为某个地方的资产管道冲突？

我尝试过的：

• tailwind.config像这样 直接将图像插入我的： 'essential-oil': "url('/assets/images/essential-oil.png')"，'essential-oil': "asset-url('essential-oil.png')"
• 使用 a 将图像直接插入到我的 HTML 中style: "background-image:url(/assets/images/essential-oil.png)
• 将我的图像放在应用程序的其他位置，例如Public

所有解决方案都不起作用。最糟糕的是，我的所有样式最多都会从我的 HTML 中消失，样式看起来不错，但图片不存在。任何想法 ？

谢谢。

我正在尝试将 Next.js 图像组件与所有具有唯一尺寸的图像一起使用。他们的示例指出图像将拉伸到父 div 的宽度和高度。我尝试过包装它们，但不知道如何适应动态图像尺寸。我想要一个设定的宽度和高度来调整每个相应的比例。TIA。

这是我的代码（图像来自数组）——因为我没有设置高度，所以页面上不会呈现任何内容。如果我使用 Tailwind，h-auto它仍然不显示：

<div className="w-screen h-screen">
  {allImages.allImages.map((image, i) => {
    return (
      <div className="relative w-100 md:w-5/6 lg:w-7/12" key={image}>
        <Image priority src={`/${image}`} layout="fill" objectFit="cover" />
      </div>
  )})}
</div>

使用 tailwindcss 2，我想使用以下方法隐藏小型设备上表中的一些列sm:hidden：

<table class="table-auto">
  <thead class="bg-gray-700 border-b-2 border-t-2 border-gray-300">
    <tr>
      <th class="py-2">Name</th>
      <th class="py-2">Active</th>
      <th class="py-2">Type</th>
      <th class="py-2 sm:hidden">Category</th>
      <th class="py-2 sm:hidden">Mailchimp Id</th>
      <th class="py-2"></th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td class="">
        Name content
      </td>
      <td class="">
        Active content
      </td>
      <td class="">
        Typecontent
      </td>

      <td class="  sm:hidden">
        Category content
      </td>

      <td class="sm:hidden">
        mailchimp content
      </td>

我预计在 640px 和更小的设备上会隐藏 2 列，但失败了。

哪种语法是正确的？

谢谢

我对 Vue 和 Tailwind 完全陌生。我只是在查看https://tailwindui.com/components/marketing/elements/headers并看到了Requires JS标签。当我将代码复制粘贴到我的项目时，它给出了一个空白页面。我在哪里配置这部分以包含 JS？

我有一个不知道高度的 flex-col 容器。我应该能够在容器中使用 justify- Between 来分隔两个 div，一个到 div 的顶部，一个到底部，因为它的主轴被定义为垂直，并且 justify- Between 用于“对齐项目”根据文档，沿着容器\xe2\x80\x99s 主轴\'。

此代码水平工作：

<div class="w-screen h-screen bg-blue-200">\n    <div class="flex justify-between">\n        <div>1</div>\n        <div>3</div>\n    </div>\n</div>\n

但是，如果我们将第二个 div 更改为“flex-col”，则 justify- Between 将无法沿垂直轴工作。为什么是这样？

<div class="w-screen h-screen bg-blue-200">\n    <div class="flex flex-col justify-between">\n        <div>1</div>\n        <div>3</div>\n    </div>\n</div>\n

游乐场在这里： https://play.tai​​lwindcss.com/41DdUFN3Fw

请问我怎样才能实现这个目标？

我正在尝试设置 Tailwind 3，但我收到了下一个警告。

No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.

这是我的项目结构

|_public : 
 |_index.html , 
 |_output.css  // this css file generated after i run the command | npx tailwindcss -i ./src/input.css -o ./public/output.css --watch
|_src
 |_input.css

tailwind.config.js

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

  theme: {
    extend: {},
  },
  plugins: [],
}