标签: tailwind-css

此站点： https: //tailwindcss-custom-forms.netlify.app/提供了此示例tailwind.config.js文件：

// tailwind.config.js
module.exports = {
  theme: {
    customForms: theme => ({
      dark: {
        'input, textarea, multiselect, checkbox, radio': {
          backgroundColor: theme('colors.gray.900'),
        },
        select: {
          backgroundColor: theme('colors.gray.600'),
        },
      },
      sm: {
        'input, textarea, multiselect, select': {
          fontSize: theme('fontSize.sm'),
          padding: `${theme('spacing.1')} ${theme('spacing.2')}`,
        },
        select: {
          paddingRight: `${theme('spacing.4')}`,
        },
        'checkbox, radio': {
          width: theme('spacing.3'),
          height: theme('spacing.3'),
        },
      }
    })
  },
  plugins: [
    require('@tailwindcss/custom-forms'),
  ]
}

它使用colors.gray.600符号来设置颜色。不过我需要一种#f90f39颜色。我该如何设置？

我有一个项目，我需要在表单中使用选择。所有其他类型的输入都有一个浅灰色的占位符。输入中输入的文本是黑色的。

表单的选择输入需要具有相同的样式。默认/占位符值需要以深灰色显示，用户可以选择的实际值需要以黑色显示。但是当我尝试为第一个（默认/占位符）选项指定不同的颜色时，它不使用这种颜色。它实际上继续使用选择元素中指定的颜色。

这是元素内的选择：

 <select
        type="text"
        name="carType"
        id="carType"
        v-model="carType"
        placeholder="Car Type"
        class="my-2 px-4 py-3 border rounded-lg text-black-primary focus:outline-none text-sm"
      >
        <option class="text-gray-400" value="" disabled selected>Select your option</option>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
</select>

我正在尝试使用负位置实用程序类，-left-1但它们没有生成。

我正在使用版本 2.0.2 并检查生成的 css，我可以看到这些类没有生成，尽管常规的正类是生成的。负类在此页面上作为默认类列出： https: //tailwindcss.com/docs/top-right-bottom-left。

我尝试将配置重置为默认值：

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

但它仍然不会生成文档页面顶部列出的负类。

为什么没有生成这些类？

我正在尝试使用 设置登录部分的背景不透明度bg-opacity-75，但是当我将其添加到我的 className 中时，背景颜色就会消失。如果我使用opacity-75，所有子 div 都将是透明的，如果我使用opacity-100，背景颜色将消失，只有输入字段可见，它有点有线。另外，我正在使用tailwind.configtailwind v2.0.2 的默认文件。

这是我的代码：

...
        <div className={"h-screen w-screen py-10 lg:w-3/6"}>
            <div
                className={"bg-gray-50 h-full max-w-md rounded-2xl bg-opacity-75 shadow-md mx-auto md:max-w-lg hover:shadow-lg transition-shadow"}>
                <Logo/>
                <Text/>
...

我也尝试过内联CSS，但仍然不起作用。 使用bg-opacity-75（输入后面应该有一个白色透明区域）

我正在使用 Flutter 进行第一步，我想知道是否可以使用顺风样式和组件。

谢谢

我想从输入字段中删除箭头，但我想将其范围限制为仅此组件的文本字段。

<v-text-field
  class="inputPrice"
  type="number"
  v-model="$data._value"
  @change="sendValue"
  > 
</v-text-field>

<style scoped>

.inputPrice input[type='number'] {
    -moz-appearance:textfield;
}
.inputPrice input::-webkit-outer-spin-button,
.inputPrice input::-webkit-inner-spin-button {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;  
}

</style>

我的文本字段

我尝试从类似的问题中使用此解决方案：https://github.com/vuejs/vue-loader/issues/559#issuecomment-271491472

以及这个： https: //github.com/vuetifyjs/vuetify/issues/6157#issue-399264114

但它们似乎并没有真正发挥作用。

我有以下 React 代码（+Tailwind CSS）：

<section className={"flex flex-col items-center"}>
      {managers.map((manager) => (
        <UserCard user={manager} />
      ))}

      <section className={"flex flex-row"}>
        {coWorkers.map((coWorker) => (
          <UserCard user={coWorker} isMarked={user.id === coWorker.id} />
        ))}
      </section>

      {engineers.map((engineer) => (
        <UserCard user={engineer} />
      ))}
    </section>

虽然 UserCard 很简单：

export default function Error({ user, isMarked }: Props) {
  return (
    <article
      className={`bg-purple-500 shadow-lg m-3 p-3 text-white rounded-lg ${
        isMarked && "border-4 border-purple-800 font-bold"
      }`}
    >
      <h1>
        {user.firstName} {user.lastName}
      </h1>
      <h2>{user.email}</h2>
    </article>
  );
}

问题：卡片的宽度不同，例如：

知道如何使用 tailwindcss 确保它们的宽度相同吗？（每行/列）

拜托，我对tailwindCSS有疑问。我正在尝试制作投票按钮（像和磁盘一样）。我使用 flex 作为 的按钮和footer标签section。

请问，您能帮我如何将投票否决的文本对齐到右侧吗？

如何对齐标签中的文本footer？

这是我的代码（在此代码下方您可以找到游乐场的链接）

<main class="h-screen bg-gradient-to-b from-red-700 to-pink-200">
  <div class="p-5">
    <article class="max-w-xs mx-auto bg-white rounded-2xl shadow-md overflow-hidden">
      <figure>
        <img class="object-scale-down w-96" src="https://images.pexels.com/photos/5276584/pexels-photo-5276584.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=200&w=200" alt="Man looking at item at a store" />
      </figure>
      <article>
        <section class="flex text-2xl font-bold text-white p-2">
          <div class="flex-1 text-left bg-green-100 text-black rounded-xl mx-1 px-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline" viewBox="0 0 20 20" fill="currentColor">
              <path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 …

Tailwind CSS 是否允许渐变过渡，即更改“从”或“到”颜色，以便任一颜色的渐变通过过渡而改变？

我尝试过的：

<button class="transition duration-500 ease-in-out bg-gradient-to-t from-black to-white hover:to-red-500">
    Hover me
</button>

https://tailwindcss.com/docs/background-image#任意-values

这就是我想要使用 Tailwind bg-image 功能的方式。使用 SvelteKit next 160 和 Tailwind 3.0.9 时这不起作用。

代码：

<script>
  import globe from '$assets/bg/bg_globe2.png'
</script>

<div
    class={`flex flex-col bg-primary-dark h-64 overflow-hidden bg-no-repeat bg-[right_-14rem_bottom_-10rem] bg-[url('${globe}')]`}
>
  //children
</div>

该类bg-[right_-14rem_bottom_-10rem]工作没有问题，所以我认为 Tailwind 对 Svelte 文件路径有问题？

编辑：console.log(globe) 的输出是src/assets/bg/bg_globe2.png。