标签: tailwind-css

我正在使用tabsdaisyUI 来显示一组提升的选项卡。

然而，选项卡“下划线”在最后一个选项卡之后停止，我希望它一直继续到 div 的边缘。

有没有一种简单的方法可以实现这一目标？

<div class="tabs">
    <a class="tab tab-lifted tab-active" wire:click="omitted" id="tab1">Tab1</a>
    <a class="tab tab-lifted" wire:click="omitted" id="tab2">Tab2</a>
    <a class="tab tab-lifted" wire:click="omitted" id="tab3">Tab3</a>
    <a class="tab tab-lifted" wire:click="omitted" id="tab4">Tab4</a>
    <a class="tab tab-lifted" wire:click="omitted" id="tab5">Tab5</a>
</div>

我正在使用 vuejs 和 tailwindcss。如何从 HTML select 元素中删除默认箭头？我已经尝试过用 css 删除外观：

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}

以及顺风的appearance-none

<select :onchange="selectChanged()"
            class="bg-transparent text-xl border-0 rounded-md hover:bg-slate-800 appearance-none" ref=" eventSelect">

我当前的模板代码：

<template>
    <div>
        <select :onchange="selectChanged()"
            class="bg-transparent text-xl border-0 rounded-md hover:bg-slate-800 appearance-none" ref=" eventSelect">
            <option class="bg-slate-800">50m </option>
            <option class="bg-slate-800"> 60m </option>
            <option class="bg-slate-800"> 100m </option>
            <option class="bg-slate-800"> 300m </option>
        </select>
    </div>
</template>

它看起来像这样：

由于某种原因我似乎无法将其删除:(

我无法理解为什么蓝色在我的组件中不起作用。您能帮我解决 Stack Overflow 上的这个问题吗？我有一个标签组件，应该根据提供的颜色属性应用不同的背景和文本颜色。但是，当我将颜色属性设置为“蓝色”时，预期的蓝色不会应用于组件。我尝试了各种解决方案，包括动态构建类名以及对 Tailwind CSS 类使用正确的语法。然而，我一直没有成功解决这个问题。任何指导或建议将不胜感激。预先感谢您的帮助！

    import React from "react";
    
    export default function Tag({ index, tag, color = "red" }) {
      return (
        <li
          key={index}
          className={`inline-flex items-center rounded-full px-3 py-2 text-xs font-bold uppercase bg-${color}-200 text-${color}-700`}
        >
          <a href={`/?=${tag.text.replace(/\s/g, "_").toLowerCase()}`}>
            {tag.text}
          </a>
        </li>
      );
    }```

我最近开始使用 Create-react-app 和 TailwindCSS，我想更改整个页面的背景。找不到设置标签样式的方法

我尝试在index.css文件中添加我自己的样式，如下所示

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

body{
    background-color: aqua;
}

但仍然不起作用，似乎它被顺风样式覆盖了，有什么方法可以设置 body 标签的样式吗？

使用 tailwindcss 我有以下 html

<ol class="relative columns-1 sm:columns-3">
   <li>
       <img src="https://placehold.co/400x300">id=voluptas minus a qui tempore
   </li>
   <li>...</li>
   ...
</ol>

ol的相关 Tailwind css是

.sm:columns-3 {
   columns: 3;
}

正如您所看到的（红色箭头），一个细胞被包裹。该单元格的另一部分位于中间列的底部。这是我不想要的东西，没有包装。有什么方法可以防止这种情况，或者我应该确保所有单元格具有相同的高度吗？

我尝试在全新安装的 Laravel 6 上安装 tailwind.css。我添加了一些 tailwind 类，但它不起作用。没有错误，什么都没有。

安装

npm install tailwindcss

资源/sass/app.scss

@tailwind base;

@tailwind components;

@tailwind utilities;

生成了一个配置文件：

./node_modules/.bin/tailwind init

webpack.mix.js

var tailwindcss = require('tailwindcss');

mix.js('resources/js/app.js', 'public/js')
  .sass('resources/sass/app.scss', 'public/css')
  .options({
    processCssUrls: false,
    postCss: [ tailwindcss('tailwind.config.js') ],
});

编译

npm run dev

我添加了一些html：

<div class="rounded-lg p-6 bg-red-400">
  <img class="h-16 w-16 rounded-full mx-auto" src="https://picsum.photos/50/50">
  <div>
    <h2 class="text-lg text-red-400">Erin Lindford</h2>
    <div>Customer Support</div>
    <div>erinlindford@example.com</div>
    <div>(555) 765-4321</div>
  </div>
</div>

我没有收到任何错误或任何东西。但是，仍然安装了引导程序，但我不确定这是否重要。

我正在使用 React 和 TailwindCSS 构建一个汉堡菜单。单击“X”按钮后，我将状态更改isOpen为false. div包装菜单的 类对状态变化做出反应，但菜单不会滑出。我在这里缺少什么？

侧边栏.js：

const Sidebar = () => {
  const [isOpen, toggleSidebar] = React.useState(true);
  return (
    <div className="h-screen flex">
      <div
        className={`fixed z-30 inset-y-0 left-0 w-64 px-8 py-4 bg-gray-100 border-r overflow-auto lg:static  lg:inset-auto lg:translate-x-0 ${
          isOpen
            ? "translate-x-0 ease-out transition-medium"
            : "-translate-x-full ease-in transition-medium"
        }`}
      >
        <div className="-mx-3 pl-3 pr-1 flex items-center justify-between">
          <span>
            <p className="h-10 w-10">Logo</p>
          </span>
          <button
            onClick={() => toggleSidebar(false)}
            className="text-gray-700 lg:hidden"
          >
            <svg fill="none" viewBox="0 0 24 24" …

When I hover over a navigation item, I want a span border color to be changed. The group-hover does nothing...

Is this just not implemented in Tailwindcss yet?

 <a class="group px-4 py-2 hover:bg-white
            hover:text-primary transition-colors duration-300
            rounded-sm"
     :href="route">
    <span class="pb-1 border-b border-white group-hover:border-black">
        <slot/>
    </span>
  </a>

I obviously can do this by writing css like this, but tailwind should be able to do this, right?

a:hover span {
  border-color: black;
}

我正在使用 create-react-app、样式组件和 twin.macro 将顺风类应用于我的 React 元素。这运行良好。

我有一小部分规则无法应用，因为要么

• 它们应该应用到的元素在 react 应用程序范围之外（body，#root）
• 样式应全局应用，而不是应用于特定元素。

这是我想成为我的全局样式表的内容。

    body {
      @apply bg-gray-100 select-none;
    }
    
    #root {
      @apply h-screen text-sm;
    }
    
    input:focus,
    select:focus,
    textarea:focus,
    button:focus,
    div[contenteditable]:focus {
      @apply outline-none
    }

twin.macro 是否提供添加全局样式的功能？如果不是什么是我最好的选择。

这是编译的 TailwindCSS 文件中的原始代码：

.translate-y-full {
  --transform-translate-y: 100%; 
}

这是行不通的。CSS 的语法不正确。当我将其更改为：

.translate-y-full {
  transform: translateY(100%);
  /* --transform-translate-y: 100%; */
}

它开始工作了。

也许我错过了一些东西，但它似乎是一个错误和一个大错误......？？？