标签: tailwind-css

我想使用Tailwind Css为大屏幕和小屏幕上显示的图标头像保持完美的圆形。

我确实知道我可以使用这样的渐变径向：

.avatar{
  background: radial-gradient(circle closest-side, 
      yellow calc(100% - 2px),#db0100 calc(100% - 1px) 99%,transparent 100%);
  color: #db0100;
}

但我真的想使用 Tailwind。是否可以？谢谢。

I\xe2\x80\x99m 在具有资产管道的 Rails 7 项目中使用tailwindcss-rails gem。我需要重用 TailwindCSS 样式，例如：

.pagy-nav {\n  @apply flex space-x-2;\n}\n

我可以将此代码放入app/assets/stylesheets/application.tailwind.css文件中并且它可以工作：

@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n.pagy-nav {\n  @apply flex space-x-2;\n}\n

但是，我想将.pagy-nav代码放入单独的CSS文件pagy.css中（以更加干净/有条理）。有办法做到吗？

在我的 vue 组件中添加此引用后，我立即收到错误消息：

<script setup>
import { ExclamationTriangleIcon, XMarkIcon } from '@heroicons/vue/24/outline'

我使用的是 tailwindcss 3.1.8。

我已经执行了这个：

npm install @headlessui/vue @heroicons/vue

我安装了 Heroicons 1.0.6 版本。为什么找不到图标？

我正在使用顺风创建组件，但是当我将活动类添加到组件时，只有当我继续单击按钮时它才有效。

https://i.stack.imgur.com/Sx8Vy.jpg

     <li>
        <a href="#" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg active active:bg-blue-400">
           <img src="./DashIcons/homeIcon.svg" class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75" alt="">
           <span class="flex-1 ml-3 whitespace-nowrap">Dashboard</span>
        </a>
     </li>

我有 4 行，每行三个按钮。

《顺风》播放链接

我想要的是

当我单击第一行中 3 个按钮中的任意一个时，然后单击下一行中 3 个按钮中的任意一个，然后单击这些行中的任意一个按钮，然后单击最后两行。

所有单击的按钮都应保持突出显示。

我怎样才能在顺风CSS中实现这一点。

我的研究

我已经搜索并找到了focused状态，但是一旦我单击第二行中的任何按钮，突出显示的内容就会消失在前一行中选择的按钮中。

我的代码

<div class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12 space-y-6">
  <div class="bg-slate-50 px-28 ">
    <button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login21</button>
    <button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login22</button>
    <button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login23</button>
  </div>
  <div class="bg-slate-50 px-28 ">
    <button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login31</button>
    <button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login32</button>
    <button class="bg-indigo-400 text-white px-5 py-2.5 focus:bg-green-500">Login33</button>
  </div>
  <div class="bg-slate-50 px-28 ">
    <button …

我正在努力line-clamp工作。我使用 Tailwind CSS（不幸的是）。正如我在添加实用程序类之前多次所做的那样line-clamp-2（我只需要显示 2 行文本）。正如您所看到的，出现了省略号，但在第三行我们看到了文本的其他部分。有人可以帮我吗？该下拉菜单有标记。屏幕截图也已附上。

  <ul class="max-w-md rounded-xl bg-white py-2 text-sm shadow-2xl">
    <li
      class="my-0.5 px-3 py-2 font-medium line-clamp-2"
    >
      {{ currentUserAlias }}
    </li>
    <li v-for="(profileMenuItem, index) in items" :key="index" class="my-0.5">
      <Component
        :is="'a'"
        class="block whitespace-nowrap px-3 py-2 font-normal hover:bg-primary-100"
        :to="profileMenuItem.href"
        :href="getAbsoluteLink(profileMenuItem.href)"
      >
        {{ profileMenuItem.title }}
      </Component>
    </li>
  </ul>

当我在主机应用程序上加载组件时，组件加载时没有 css，我使用 Vite + Vue 和 tailwind，有人知道如何加载这些样式吗？

这是我的 vite.conf.ts：

import federation from "@originjs/vite-plugin-federation";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";


export default defineConfig({
  server: {
    port: 8000,
  },
  build: {
    target: ["chrome101", "edge89", "firefox89", "safari15"],
  },
  plugins: [
    vue(),
    federation({
      name: "myLib",
      filename: "remoteEntry.js",
      // Modules to expose
      exposes: {
        "./Counter": "./src/components/Counter.vue",
        "./Controller": "./src/controller.ts",
      },
      shared: ["vue", "css"],
    }),
  ],
});

这是我第一次使用 Tailwind\xc2\xa0CSS，我不明白为什么颜色不起作用。这是Laravel Jetstream的全新安装，附带 Tailwind CSS、Vue.js\xc2\xa03、Vite 和 Inertia。

如果动态添加类，似乎不会从 Tailwind\xc2\xa0CSS 导入相关样式。

这是一些基本组件：

<template>\n    <div :class="style" class="border-l-4 p-4" role="alert">\n        <p><slot name="headline"></slot></p>\n        <p class="pt-3" v-if="slots.error"><span class="font-bold">Message:</span><slot name="error"></slot></p>\n        <div class="my-3" v-if="slots.info"><slot name="info"></slot></div>\n    </div>\n</template>\n<script setup>\n    import { useSlots } from \'vue\'\n    const slots = useSlots()\n</script>\n<script>\nexport default {\n    name: \'Alert\',\n    props: {\n        color: {type: String, default: \'red\'}\n    },\n    computed: {\n        style() {\n            return `bg-${this.color}-100 border-${this.color}-500 text-${this.color}-700`\n        }\n    }\n\n}\n</script>\n

尽管类存在，但使用类似的东西没有任何与颜色相关的样式：

<Alert color="orange" class="my-5">\n    <template #headline>Test</template>\n</Alert>\n

但是，如果动态类也在同一页面的某处指定，那么一切都会正常。

IE，

我有一个表达式，用于查找表单错误并在出现冒泡时附加一个 div：

{touched && normalizedError && (\n      <div className="visible alert-error text-xs text-red-500" role="alert">\n        {normalizedError}\n      </div>\n    )}\n

我想重构它并始终在我的输入元素下方显示 div，但使用该类invisble对用户隐藏它们，除非返回错误\xe2\x80\x94，在这种情况下，我将有条件添加该类visible。

实现这一目标的最佳方法是什么？

为了使用 TailwindCSS 设置背景封面，我从 useEffect 内的 bookId（10 位数字）中提取了颜色。颜色会更新，组件会使用更新后的颜色值重新渲染，但渲染页面上的背景颜色仍然与其父 div 相同。

const colors = [
    'from-red-500',
    'from-orange-500',
    'from-yellow-500',
    'from-green-500',
    'from-cyan-500',
    'from-blue-500',
    'from-indigo-500',
    'from-violet-500',
    'from-purple-500',
    'from-pink-500',
]

function BgCover(props) {
    const [color, setColor] = useState(null)
    const router = useRouter()

    useEffect(() => {
        const id = router.query.bookId
        const index = id.slice(-1) //extract the index from bookId
        const bgColor = colors[index]
        setColor(bgColor)
    }, [])

    return (
        <Fragment>
            {color ? (
                <div className='flex-grow scrollbar-hide select-none relative'>
                    <div className={`bg-gradient-to-b ${color} to-black`}>
                        <section
                            className={`flex flex-col md:flex-row items-center justify-center …