主页 / coding / 问题

问题[tailwind-css](coding)

Martin Hope
Jadam
Asked: 2025-03-06 07:25:50 +0800 CST
  • 6

我没有看到大多数 tailwind v4 @theme 样式出现在故事​​书样式表中。

/.storybook/preview.ts

import type { Preview } from '@storybook/react'
import '../ui/src/styles/index.css'

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
  tags: ['autodocs'],
}

export default preview

/ui/src/styles/index.css

@import 'tailwindcss';

@theme {
  --color-text-disabled: oklch(0.708 0 0);
  --color-text-muted: oklch(0.556 0 0);
  --color-text-default: oklch(0.439 0 0);
  --color-text-emphasis: oklch(0.371 0 0);
  --color-text-header: oklch(0.205 0 0);
  --color-text-link: oklch(0.205 0 0);

  --color-brand: oklch(0.4616 0.0757 170.11);
  --color-priority: oklch(0.7226 0.1352 50.08);
  --color-danger: oklch(0.5796 0.2219 19.61);

  --color-neutral-0: oklch(1 0 0);
  --color-neutral-25: oklch(0.9782 0.0035 39.48);
  --color-neutral-50: oklch(0.985 0 0);
  --color-neutral-100: oklch(0.97 0 0);
  --color-neutral-200: oklch(0.922 0 0);
  --color-neutral-300: oklch(0.87 0 0);
  --color-neutral-400: oklch(0.708 0 0);
  --color-neutral-500: oklch(0.556 0 0);
  --color-neutral-600: oklch(0.439 0 0);
  --color-neutral-700: oklch(0.371 0 0);
  --color-neutral-800: oklch(0.269 0 0);
  --color-neutral-900: oklch(0.205 0 0);


  /* lots of other color vars... */
}

浏览器中的样式表

<style type="text/css" data-vite-dev-id="/Users/johnlichty/code/heard-app/ui/src/styles/index.css">/*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-neutral-50: oklch(0.985 0 0);
    --color-neutral-100: oklch(0.97 0 0);
    --color-neutral-200: oklch(0.922 0 0);
    --color-neutral-700: oklch(0.371 0 0);
    --color-neutral-900: oklch(0.205 0 0);
    --spacing: 0.25rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --font-weight-medium: 500;
    --radius-md: 0.375rem;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-font-feature-settings: var(--font-sans--font-feature-settings);
    --default-font-variation-settings: var(
      --font-sans--font-variation-settings
    );
    --default-mono-font-family: var(--font-mono);
    --default-mono-font-feature-settings: var(
      --font-mono--font-feature-settings
    );
    --default-mono-font-variation-settings: var(
      --font-mono--font-variation-settings
    );
    --color-danger: oklch(0.5796 0.2219 19.61);
    --color-neutral-0: oklch(1 0 0);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" );
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var( --default-font-variation-settings, normal );
    -webkit-tap-highlight-color: transparent;
  }

  ...

所以看起来有几个进去了，但我几乎定义了 100 个，更不用说还没有显示的自定义字体了。

如果我添加类似的东西：

html {
  background-color: pink;
}

背景变成粉红色，我看到样式表中的样式。

tailwind-css
Martin Hope
GʀᴜᴍᴘʏCᴀᴛ
Asked: 2025-03-06 06:38:04 +0800 CST
  • 7

在 Tailwind CSS 版本 3.4.1 中尝试构建时间线，我想知道当我的辅助图标无法正确显示在线上时，我做错了什么。

代码：

import { ClipboardCheck, MessageSquare, Wrench, Car } from "lucide-react";

export default function TimelineExperiement() {
  const timeline = [
    {
      icon: <MessageSquare className="h-10 w-10 text-red-600" />,
      title: "Monday",
      description:
        "Bacon ipsum dolor amet shankle bresaola venison corned beef frankfurter short ribs pastrami pancetta porchetta tri-tip sausage fatback pork loin rump.",
    },
    {
      icon: <ClipboardCheck className="h-10 w-10 text-red-600" />,
      title: "Tuesday",
      description:
        "Bacon ipsum dolor amet shankle bresaola venison corned beef frankfurter short ribs pastrami pancetta porchetta tri-tip sausage fatback pork loin rump.",
    },
    {
      icon: <Wrench className="h-10 w-10 text-red-600" />,
      title: "Wednesday",
      description:
        "Bacon ipsum dolor amet shankle bresaola venison corned beef frankfurter short ribs pastrami pancetta porchetta tri-tip sausage fatback pork loin rump.",
    },
    {
      icon: <Car className="h-10 w-10 text-red-600" />,
      title: "Thursday",
      description:
        "Bacon ipsum dolor amet shankle bresaola venison corned beef frankfurter short ribs pastrami pancetta porchetta tri-tip sausage fatback pork loin rump.",
    },
  ];

  return (
    <section id="process" className="py-16 bg-gray-50">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold text-gray-800 mb-4">Timeline</h2>
          <p className="text-gray-600 max-w-2xl mx-auto">
            Landjaeger alcatra shankle, buffalo cupim kielbasa short ribs
            burgdoggen.
          </p>
        </div>

        <div className="relative">
          <div className="hidden md:block absolute left-1/2 top-0 bottom-0 w-1 bg-red-200 transform -translate-x-1/2" />
          <div className="space-y-12 relative">
            {timeline.map((tl, index) => (
              <div
                key={index}
                className="flex flex-col md:flex-row items-center"
              >
                <div
                  className={`md:w-1/2 ${
                    index % 2 === 0
                      ? "md:pr-12 md:text-right"
                      : "md:order-2 md:pl-12 "
                  }`}
                >
                  <h3 className="text-xl font-bold text-gray-800 mb-2">
                    {tl.title}
                  </h3>
                  <p className="text-gray-600">{tl.description}</p>
                </div>

                <div
                  className={`my-4 md:my-0 z-10 bg-white rounded-full p-4 shadow-md`}
                >
                  {tl.icon}
                </div>

                <div
                  className={`md:w-1/2 ${
                    index % 2 === 0 ? "md:order-2" : "md:text-right"
                  }`}
                />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

我怎样才能让偶数项上的图标超出实线？

tailwind-css
Martin Hope
Justin
Asked: 2025-02-14 11:27:18 +0800 CST
  • 6

当我在 svelte kit tailwind 项目中使用 Tailwind v4 运行build脚本时，它会添加每一种 tailwind 颜色。我只使用一种 tailwind 颜色，所以我想删除它们。

我花了很多时间在网上搜索并询问 LLM，但没有人能回答无需配置的 tailwind v4 的问题。

这是我的app.css

@import 'tailwindcss';

@theme {
    --color-brand-red: #f00;
}

@utility container {
    padding-inline: 1rem;
    margin-inline: auto;
}

这是我的 package.json：

"scripts": {
        "dev": "vite dev",
        "build": "vite build",
        "preview": "vite preview",
        "prepare": "svelte-kit sync || echo ''",
        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
        "format": "prettier --write .",
        "lint": "prettier --check . && eslint ."
    },
    "devDependencies": {
        "@eslint/compat": "^1.2.5",
        "@eslint/js": "^9.18.0",
        "@sveltejs/adapter-auto": "^4.0.0",
        "@sveltejs/kit": "^2.16.0",
        "@sveltejs/vite-plugin-svelte": "^5.0.0",
        "@tailwindcss/vite": "^4.0.0",
        "eslint": "^9.18.0",
        "eslint-config-prettier": "^10.0.1",
        "eslint-plugin-svelte": "^2.46.1",
        "globals": "^15.14.0",
        "prettier": "^3.4.2",
        "prettier-plugin-svelte": "^3.3.3",
        "prettier-plugin-tailwindcss": "^0.6.11",
        "svelte": "^5.0.0",
        "svelte-check": "^4.0.0",
        "tailwindcss": "^4.0.0",
        "typescript": "^5.0.0",
        "typescript-eslint": "^8.20.0",
        "vite": "^6.0.0"
    },
    "pnpm": {
        "onlyBuiltDependencies": [
            "esbuild"
        ]
    },
    "dependencies": {
        "lucide-svelte": "^0.475.0"
    }

然而当我运行时pnpm build我得到一个包含以下内容的 css 文件：

/*! tailwindcss v4.0.6 | MIT License | https://tailwindcss.com */@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-serif:ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-50:oklch(.971 .013 17.38);--color-red-100:oklch(.936 .032 17.717);--color-red-200:oklch(.885 .062 18.334);--color-red-300:oklch(.808 .114 19.571);--color-red-400:oklch(.704 .191 22.216);--color-red-500:oklch(.637 .237 25.331);--color-red-600:oklch(.577 .245 27.325);--color-red-700:oklch(.505 .213 27.518);--color-red-800:oklch(.444 .177 26.899);--color-red-900:oklch(.396 .141 25.723);--color-red-950:oklch(.258 .092 26.042);--color-orange-50:oklch(.98 .016 73.684);--color-orange-100:oklch(.954 .038 75.164);--color-orange-200:oklch(.901 .076 70.697);--color-orange-300:oklch(.837 .128 66.29);--color-orange-400:oklch(.75 .183 55.934);--color-orange-500:oklch(.705 .213 47.604);--color-orange-600:oklch(.646 .222 41.116);--color-orange-700:oklch(.553 .195 38.402);--color-orange-800:oklch(.47 .157 37.304);--color-orange-900:oklch(.408 .123 38.172);--color-orange-950:oklch(.266 .079 36.259);--color-amber-50:oklch(.987 .022 95.277);--color-amber-100:oklch(.962 .059 95.617);--color-amber-200:oklch(.924 .12 95.746);--color-amber-300:oklch(.879 .169 91.605);--color-amber-400:oklch(.828 .189 84.429);--color-amber-500:oklch(.769 .188 70.08);--color-amber-600:oklch(.666 .179 58.318);--color-amber-700:oklch(.555 .163 48.998);--color-amber-800:oklch(.473 .137 46.201);--color-amber-900:oklch(.414 .112 45.904);--color-amber-950:oklch(.279 .077 45.635);--color-yellow-50:oklch(.987 .026 102.212);--color-yellow-100:oklch(.973 .071 103.193);--color-yellow-200:oklch(.945 .129 101.54);

等等。这个文件有 28kb，我使用的独特的顺风类很少。

我搜索了他们的官方文档，似乎只有针对 v2 的文档。有没有办法编辑我的文档app.css以删除所有未使用的颜色？谢谢。

tailwind-css
Martin Hope
havaka
Asked: 2025-02-10 17:25:45 +0800 CST
  • 6

我是 CSS 业余爱好者，对 TailwindCSS 还不熟悉，所以我不知道从哪里开始解决这个问题。

我有一个<p>元素，现在它在悬停时会300ms延迟显示，但我希望它完全无延迟地消失。我该如何实现？

<p className={`opacity-0 group-hover:opacity-100 delay-300`}>
  Lorem ipsum
</p>

‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎

tailwind-css
Martin Hope
Sig
Asked: 2025-02-09 00:46:09 +0800 CST
  • 6

我已经下载了最新的（v4.0.4）TailwindCSS 独立 CLI 并创建了以下文件。

tailwind.config.js

module.exports = {
  content: ["./index.html"],
  theme: {
    extend: {},
  },
  plugins: [],
}

tailwind.css

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

索引.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <p class="text-emerald-400 text-5xl font-bold">Lorem Ipsum</p>
  </body>
</html>

我开始用

./tailwindcss -i tailwind.css -o style.css --watch
≈ tailwindcss v4.0.4

Done in 41ms

但是，style.css我的页面中不包含样式index.html。

样式.css

/*! tailwindcss v4.0.4 | MIT License | https://tailwindcss.com */
.relative {
  position: relative;
}
.mx-auto {
  margin-inline: auto;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.w-full {
  width: 100%;
}
.flex-col {
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-end {
  justify-content: flex-end;
}
.justify-start {
  justify-content: flex-start;
}
.object-cover {
  object-fit: cover;
}
.text-center {
  text-align: center;
}
.transition-all {
  transition-property: all;
  transition-timing-function: var(--tw-ease, ease);
  transition-duration: var(--tw-duration, 0s);
}
.duration-700 {
  --tw-duration: 700ms;
  transition-duration: 700ms;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}

我在这里遗漏了什么？

tailwind-css
Martin Hope
Jordi Cabré
Asked: 2025-01-22 01:06:59 +0800 CST
  • 5

我创建了一个粘性导航栏：

    <div class="navbar bg-base-100 sticky top-0">

我的导航栏代码下的“内容”部分是：

    <div
      class="hero min-h-screen"
      style="background-image: url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp);">
      ...
    </div>

我的导航正确粘贴，但我的英雄部分（因为是最小屏幕）显示滚动。我的意思是，我需要我的英雄部分高度适合（屏幕高度 - 导航栏高度）。

我的意思是我想删除滚动效果。

有什么想法吗？

tailwind-css
Martin Hope
TreyCollier
Asked: 2025-01-20 21:35:47 +0800 CST
  • 5

我是 Tailwind 的新手，遇到了 Grid 布局的问题。

<Grid
  gap="3"
  columns={{ initial: '1', md: '4' }}
  align="end"
>
  <Box className="md:col-span-3">
    <Text
      as="p"
      mb="1"
    >
      Password
    </Text>
    <TextField.Root
      type="password"
      placeholder="Password..."
      {...register('password')}
    />
    <ErrorMessage className="mt-5">{errors.password?.message}</ErrorMessage>
  </Box>
  <Button
    disabled={isSubmitting}
  >
    Log In {isSubmitting && <Spinner />}
  </Button>
</Grid>

我的目标是Log In在较大的设备上将按钮放在文本输入旁边，但在较小的设备上将按钮放在下方。

但是，我遇到了这个问题，其中网格布局之间有一个点768px，并且没有按照我预期的方式工作。1024px

我理解的768px是， 是中型设备的断点，1024px是大型设备的断点。

我想象这是一件愚蠢的事情，但却无法完全理解。

我已附加图片来显示该问题。

第二张图是屏幕宽度在 768 到 1024 像素之间时的网格布局。

我的理解是，我为中型设备指定了 4 列，并让<Box>占用其中的 3 列。任何小于 768px 的内容都应仅使用一列。

宽度<768px时的UI

宽度 >768px 但 <1024px 时的 UI

宽度>1024px时的UI

tailwind-css
Martin Hope
もぐもぐぷりん
Asked: 2024-12-21 08:14:06 +0800 CST
  • 5

我已经创建了自定义 dropShadow 类。我想让它使用 Tailwind 的颜色系统，例如red-500 blue-200。

当前我的配置：

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      dropShadow: {
        /* Adding all color I need is take so long!!! so I wanna use Tailwind's Color e.g red-500 blue-200 */
        'custom-red': '0 4px 6px rgba(255, 0, 0, 0.5)',
        'custom-green': '0 4px 6px rgba(0, 255, 0, 0.5)',
        'custom-blue': '0 4px 6px rgba(0, 0, 255, 0.5)',
      },
    },
  },
  plugins: [],
}

我的目标是像这样使用它：

<div class="drop-shadow-custom-red-500 p......"></div>
<div class="drop-shadow-custom-purple-600 p......"></div>
<div class="drop-shadow-custom-blue-200 p......"></div>

我知道我可以根据需要简单地将每种颜色添加到配置中。但如果我可以使用 tailwind 的颜色，它会更有用。

tailwind-css
Martin Hope
Ben
Asked: 2024-12-20 23:04:39 +0800 CST
  • 5

我试图在网格中放置一个带有 overflow-x-auto 的 div，但该 div 仍然最大，因为父级尺寸为 max-w-2xl。

<main class="grid mx-auto mt-20 min-h-screen w-full max-w-2xl gap-16 bg-gray-100 px-4 pt-4 sm:px-6 sm:pt-6 lg:px-8 lg:pt-8">
  <section class="mb-20">
    <div class="w-full overflow-x-auto">
      <div class="flex space-x-4 pb-4">
        <div class="h-36 w-48 flex-shrink-0 rounded-lg bg-red-300"></div>
        <div class="h-36 w-48 flex-shrink-0 rounded-lg bg-red-300"></div>
        <div class="h-36 w-48 flex-shrink-0 rounded-lg bg-red-300"></div>
        <div class="h-36 w-48 flex-shrink-0 rounded-lg bg-red-300"></div>
        <div class="h-36 w-48 flex-shrink-0 rounded-lg bg-red-300"></div>
        <div class="h-36 w-48 flex-shrink-0 rounded-lg bg-red-300"></div>
        <div class="h-36 w-48 flex-shrink-0 rounded-lg bg-red-300"></div>
      </div>
    </div>
  </section>
</main>

https://play.tai​​lwindcss.com/HpULo02BYA

tailwind-css