标签: tailwind-css

我正在使用 Tailwind v2.1.0 和 Laravel v8.12

我试图将鼠标悬停在具有顺风类的标签上，但它不起作用

<a href="/" class="text-gray-800 border-transparent border-b-2 hover:border-gray-600 hover:text-gray-800 px-3 py-2 text-sm font-medium uppercase">Home</a>

当我用 border-gray-100 或任何其他颜色替换 border-transparent 时，我可以看到悬停效果。

最初我不想要任何边框，这就是提到边框透明的原因。

可能是什么问题？

以下是我的控制台上的错误

$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: no custom webpack configuration in next.config.js https://nextjs.org/docs/messages/webpack5

warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|C:\Users\J.Andrew\Documents\WebDev\nextjs-boilerplate\node_modules\next\dist\compiled\css-loader\cjs.js??ruleSet[1].rules[2].oneOf[7].use[1]!C:\Users\J.Andrew\Documents\WebDev\nextjs-boilerplate\node_modules\next\dist\compiled\postcss-loader\cjs.js??ruleSet[1].rules[2].oneOf[7].use[2]!C:\Users\J.Andrew\Documents\WebDev\nextjs-boilerplate\node_modules\next\dist\compiled\resolve-url-loader\index.js??ruleSet[1].rules[2].oneOf[7].use[3]!C:\Users\J.Andrew\Documents\WebDev\nextjs-boilerplate\node_modules\next\dist\compiled\sass-loader\cjs.js??ruleSet[1].rules[2].oneOf[7].use[4]!C:\Users\J.Andrew\Documents\WebDev\nextjs-boilerplate\styles\globals.scss': No serializer registered for CssSyntaxError
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> webpack/lib/ModuleBuildError -> CssSyntaxError …

所以，我正在构建一个基本布局为

• 导航栏
• 内容
• 页脚

示例图片，取自：Tailwindcss：底部固定/粘性页脚

我的 App.vue 组件

  <div class="justify-center h-screen relative">
    <TheNavbar class="top-0"/>
    <div class="h-screen mb-auto">
      <router-view class="mb-auto" :key="$route.fullPath"/>
    </div>
    <Toast v-if="showToast" :message="showToast"/>
    <Footer class="relative" :footer_links="footer_links"/>  
  </div>

我希望页脚始终位于页面底部。当内容不够时，将Footer推到页面底部！

在我的内容上使用h-screen会将页脚推到底部。然而，在我需要滚动的页面上，页脚不会被向下推，而是会干扰内容。看图片...

当我摆脱班级时，问题就逆转了h-screen。现在，如果没有足够的内容，页脚就会爬到内容处，在其下方留下空白区域。

如何使页脚始终位于页面底部？

附录：

使用：

<Footer class="fixed inset-x-0 bottom-0"/>  

使页脚停留在页面底部。但是，现在当我滚动时，内容的底部被页脚剪切。

我试图避免在我的<a>标签下有下划线。我已经按照文档添加了该类"no-underline"，但我的链接下仍然有下划线？我添加了下面使用的代码：

<div
  class="
    my-3
    flex flex-wrap
    -m-1
    text-center
    justify-center
    items-center
    no-underline
  "
>
  <div class="m-auto">
    {% for tag in tags %}
    <a
      href="{% routablepageurl blog_page 'post_by_tag' tag.slug %}"
      class="no-underline"
    >
      <span
        class="
          font-mono
          m-1
          bg-gray-200
          hover:bg-gray-300
          rounded-full
          px-2
          py-1
          font-bold
          text-sm
          leading-loose
          cursor-pointer
          shadow-lg
          no-underline
        "
        >{{ tag }}</span
      >
    </a>
    {% empty %} No tags yet {% endfor %}
  </div>
</div>

Thanks for the help!

我在我的项目中使用 TailwindCSS，我想设置默认边框颜色，对于正常主题，我通过以下方式执行此操作：

module.exports = {
  mode: "jit",
  purge: ["{pages,app}/**/*.{jsx,tsx}", "node_modules/react-toastify/**"],
  darkMode: "media",
  theme: {
    extend: {
      borderColor: (theme) => ({
        DEFAULT: theme("colors.gray.100"), // Light theme default border color
        dark: {
          DEFAULT: theme("colors.gray.800"), // Dark theme default border color NOT WORKING
        },
      }),
  // ...
}

对于浅色主题，它工作正常，但是，对于深色主题，我似乎找不到应用默认值的方法，关于如何使其工作有什么想法吗？

多谢！

我正在使用顺风创建一张带有箭头的卡片。我希望箭头始终位于文本旁边 10px。但是当文本换行时，文本的宽度大于文本的实际宽度。

我尝试添加width: fit-content，但文本会溢出并且无法换行。如果我添加width: min-content，那么文本总是换行。

在这种情况下，我必须使用 javascript 来获取文本的实际宽度，对吧？

这是我的代码：

<div class="grid grid-cols-3 gap-8 m-20 lg:max-w-[1200px]">
  <div class="w-full h-52 overflow-hidden shadow-xl p-8 flex items-center justify-start gap-4">
    <div class="min-w-[80px] min-h-[80px] bg-blue-500"></div>
    <p class="text-xl font-bold">Software Solutions</p>
    <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1.78125 0.75L6.25 5.5C6.375 5.65625 6.46875 5.84375 6.46875 6C6.46875 6.1875 6.375 6.375 6.25 6.53125L1.78125 11.2812C1.5 11.5938 1.03125 11.5938 0.71875 11.3125C0.40625 11.0312 0.40625 10.5625 0.6875 10.25L4.6875 6L0.6875 1.78125C0.40625 1.46875 0.40625 1 0.71875 0.71875C1.03125 0.4375 1.5 …

似乎每次启动 VScode 时 Tailwind CSS IntelliSense 都不起作用，重新安装后它就可以工作，另一方面，当它工作时，Tailwind CSS IntelliSense 不会提示，除非我按空格键。如果我将一门课移至另一门课，除非我按空格键，否则不会建议

我正在使用 Tailwind CSS IntelliSense v0.7.4 ，VScode 1.63.2 ，Ubuntu 21.10

包.json

{
  "name": "svelte-ts-tailwind-app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public",
    "check": "svelte-check --tsconfig ./tsconfig.json"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^21.0.0",
    "@rollup/plugin-node-resolve": "^13.0.0",
    "@rollup/plugin-typescript": "^8.3.0",
    "@tsconfig/svelte": "^2.0.1",
    "autoprefixer": "^10.4.0",
    "postcss": "^8.4.4",
    "postcss-load-config": "^3.1.0",
    "rollup": "^2.60.2",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.1.0",
    "rollup-plugin-terser": "^7.0.2",
    "svelte": "^3.44.2",
    "svelte-check": "^2.2.10",
    "svelte-preprocess": "^4.9.4",
    "tailwindcss": "~3.0.0",
    "tslib": "^2.3.1", …

*以下问题与我之前提出的问题相关，因此如果我重复，请提前道歉，但我仍然无法解决我的问题。

我正在尝试让 Storybook 与 Tailwind CSS 一起使用，但到目前为止没有成功。这些是我遵循的步骤：

\n
1. 我从头开始创建了一个新的 TypeScript 项目，使用 Create Next App 进行引导\nit。我按照Tailwinds 网站上的说明进行操作。Tailwind 在应用程序上运行良好。
\n
2. 我按照他们网站上的说明设置了 Storybook 。Storybook 在端口 6006 上启动正常。
\n
3. 我相应地配置了 main.js 文件，以合并 PostCSS，以便 Tailwind 在 Storybook 中工作：
\n

module.exports = {\n  "stories": [\n    "../stories/**/*.stories.mdx",\n    "../stories/**/*.stories.@(js|jsx|ts|tsx)"\n  ],\n  "addons": [\n    "@storybook/addon-links",\n    "@storybook/addon-essentials",\n    "@storybook/addon-postcss"\n  ],\n  "framework": "@storybook/react"\n}\n

尽管做了所有这些，我没有看到 Tailwind 对应用程序中的故事组件\xe2\x80\x94 产生任何影响。

我尝试通过在 Storybook 组件中放入一个小元素来测试 Tailwind 是否有效。我没有看到它按预期呈现：

<h1 className="text-3xl font-bold underline">\n    Tailwind Works!\n</h1>\n

链接到 Github 存储库： …

我有以下元素：

<td class="min-w-[10rem] max-w-[10rem] overflow-ellipsis text-sm text-text-light px-3 min-w-0"></td>

它的所有类名都是通过组件自动生成的，除了最后一个min-w-0.

由于min-w-0是列出的最后一个类名，我希望它会覆盖min-w-[10rem]列出的第一个类名。

然而，由于某种原因，min-w-[10rem]似乎优先。

来自 Chrome 开发工具：

关于原因以及如何解决它有什么见解吗？

谢谢！

Shadcn UI ( https://ui.shadcn.com/ ) 工作正常，直到我只工作了几周，直到昨天，当我在本地主机中运行我的 NextJS 应用程序时，所有顺风车都不起作用。为了调试这个问题，我在一个全新的文件位置创建了一个空白的 NextJS 13 应用程序，一切正常；tailwind 正在默认的 nextJS 13 页面上工作。然后我跑了

npx shadcn-ui init

无需安装任何组件。它没有吐出任何错误，但随后顺风样式不再起作用。

注入后我的tailwind.config.js：

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: …