标签: tailwind-css

我\xe2\x80\x99m 试图更好地理解顺风网格 - 有人可以帮助我理解每个参数1fr和中的700px作用2fr

\n<!-- Complex grids -->\n<div class="grid-cols-[1fr,700px,2fr]">\n  <!-- ... -->\n</div>\n\n

伙计们，我是顺风的新手，并试图在表行之间添加空间。

      <table className="table-auto w-full shadow-md mt-5 rounded">
        <thead className="bg-base-200 text-left text-gray-700  tracking-wider">
          <tr>
            <th className="p-4 ">Chapter Number</th>
            <th className="p-4 ">Chapter Name</th>
            <th className="p-4 ">Added at</th>
            <th className="p-4 ">Status</th>
          </tr>
        </thead>
        <tbody>
          {chapters.map((chapter) => (
              <tr className="bg-card mt-6 rounded" key={chapter.chapterNumber}>
                <td className="p-4">{chapter.chapterNumber}</td>
                <td className="p-4">{chapter.chapterName}</td>
                <td className="p-4">{chapter.addedAt}</td>
                <td className="p-4">{!chapter.published && 'Not published'}</td>
              </tr>
          ))}
        </tbody>
      </table>

这不会增加表行之间的空间。mt-6所以，我在每一行都尝试过。它没有任何作用。

我看到过类似的问题并使用了 此处的答案，并添加了border-spacing和border-seperate。

所以，现在我的表行有这些类。

      <table className="table-auto w-full shadow-md mt-5  border-spacing-2 border-separate rounded">

但这会导致所有元素周围增加空间。

我不明白为什么表行会这样表现并且不采用marginwith mt-6。 …

Tailwind 排版，为了添加开始和结束引号，请向块引号添加 anafter和伪元素：before

<blockquote>
    :after
    <p>Lorem ipsum.</p>
    :before
</blockquote>

我想自定义样式，仅删除结束引号以匹配此模式：

是否可以从 tailwind.config.js 自定义它，或者我应该使用 CSS 和 覆盖样式!important？

在一个next.js项目中，我尝试使用以下示例构建一个轮播： https: //tailwind-elements.com/docs/standard/components/carousel/

我已经安装了，tailwindcss@2.0.2我还需要什么东西才能使 CSS 工作吗？

我跑了

npm install @heroicons/react

我的 package.json 看起来像这样：

"dependencies": {
"@headlessui/react": "^1.6.6",
"@heroicons/react": "^2.0.0",
...

但由于某种原因我无法让它工作！

我仍然收到此错误

请帮我一下。我不明白这里有什么问题？

如何使标题、左/右侧边栏粘在滚动条上（在桌面上，而不是移动设备上）？

它似乎不适用于固定或粘性类，我在这里发布了一个示例： https: //play.tai​​lwindcss.com/Bj68nUJj1C。

<!-- Background color split screen for large screens -->
<div class="fixed top-0 left-0 h-full w-1/2 bg-white" aria-hidden="true"></div>
<div class="fixed top-0 right-0 h-full w-1/2 bg-gray-50" aria-hidden="true"></div>
<div class="relative flex min-h-screen flex-col">
  <!-- Navbar -->
  <nav class="flex-shrink-0 bg-indigo-600">
    <div class="mx-auto max-w-7xl px-2 sm:px-4 lg:px-8">
      <div class="relative flex h-16 items-center justify-between">
        <!-- Logo section -->
        <div class="flex items-center px-2 lg:px-0 xl:w-64">
          <div class="flex-shrink-0">
            <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-mark.svg?color=indigo&shade=300" alt="Workflow" />
          </div>
        </div>

        <!-- Search section -->
        <div class="flex flex-1 …

我正在开发 Next.js 项目，当我从 Fontsource 下载 NPM 包（使用 Advent Pro 字体）时，它会下载到我的node_modules文件夹中。其中有字体文件（ttf、toff 等），还有定义 的 CSS 文件，@font_face以便将其导入其他文件。

有问题的 NPM 包：https://www.npmjs.com/package/@fontsource/advent-pro

根据 Tailwind 的文档，我应该使用新字体（在 中tailwind.config.js）扩展 Tailwind 的默认主题。以下是我的“尝试”：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,tsx,jsx}",
    "./components/**/*.{js,ts,tsx,jsx}",
  ],
  purge: [
    "./pages/**/*.{js,ts,tsx,jsx}",
    "./components/**/*.{js,ts,tsx,jsx}",
  ],
  darkMode: 'class', // or'media' or 'class'  
  theme: {
    extend: {
      colors: {
        'cream': '#FFDFBD',
        'wood': '#460B0B'
      },
      backgroundImage: {
        'darkModeBG': "linear-gradient(0deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05)), url('~/public/overpass.gif')",
        'lightModeBG': "url('~/public/station.gif')"
      },
      fontFamily: {
        titillium: ['Titillium-Web', 'sans-serif'],
        adventProHeader: …

我正在使用tailwindcss并Remix.run试图找出如何根据tailwindcss从服务器获得的数据动态更改一些原色。我看过一些使用Next.js框架的示例，但无法在Remix.run.

Tailwind 声明，当涉及到我们不想污染 tailwind 配置的任意颜色时，以下情况是可能的：

bg-[#e73d3dFF]

现在在代码中，当像这样编写所述颜色时，它可以工作：

bg-[#e73d3dFF]

这是让我感到困惑的部分，当使用任何形式的编译编写时（我将显示所有示例），它不起作用。字符串正确打印到 HTML 上，但颜色未呈现。

实施例1

`bg-[${navItem.bg.hex}]`

实施例2

const classStyle = `bg-[${navItem.bg.hex}]`;
classNames({[classStyle]: true}); 

示例3：

'bg-[' + {navItem.bg.hex} + ']'; 

上面的所有示例都会正确打印 HTML，因此我们确实看到：

<li class="bg-[#e73d3dFF]">

但是，问题在于，颜色没有显示，规则没有应用，就像颜色规则不是由 Tailwind 创建的一样。

有任何想法吗？

我遵循了nextjs 的tailwind 安装指南

下面是我的tailwind.config.js文件

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

但智能感知仅在我的类名以空格开头时才起作用。

下面是我的 vscode settings.json 文件。我认为可能有什么东西导致了这个错误，但是注释掉整个文件并不能解决问题。

{
  "color-highlight.markerType": "dot-before",
  "explorer.confirmDelete": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "autoprefixer.formatOnSave": true,
  "autoprefixer.browsers": [
    "last 4 versions",
    "ie >= 9",
    "> 5%"
  ],
  "liveServer.settings.donotShowInfoMsg": true,
  "editor.detectIndentation": false,
  "editor.tabSize": 2,
  "liveServer.settings.donotVerifyTags": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "scss.format.newlineBetweenRules": false,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  "vetur.format.defaultFormatter.js": "prettier-eslint",
  "workbench.settings.openDefaultKeybindings": true,
  "[typescriptreact]": {
    "editor.defaultFormatter": "vscode.typescript-language-features" …