标签: tailwind-css

我们如何在 Tailwind CSS 中的填充上使用自定义百分比？

我的配置：

theme: {
    extend: {
      spacing: {
        '80\%': '80%', // p-80% - doesn't work
      }
    },
  },

我们可以用简单的 CSS 以旧的方式实现这一点：

.p-80\% {
   padding: 80%;
}

但理想情况下，我们也可以使用 Tailwind 来做到这一点。

有任何想法吗？

我的问题很简单...我在我的应用程序中使用 HeadlessUI 的 Dialog 组件进行 React，当我单击模式时我希望它不会关闭。在文档中，有对话框。处理此交互的覆盖参数，但没有设置可以禁用它。

有什么解决办法吗？这是我正在使用的组件的 HeadlessUI 文档的链接：https://headlessui.dev/react/dialog

也许你知道 React 的“警报阻塞模式”是什么？

 <div class="bg-gradient-to-r from-cyan-500 to-blue-500 ">

。。。。

我已经尝试过上面的代码。但这是线性渐变，我想要垂直渐变。

Font Awesome在我的 shadow DOM 中不起作用，因为我在其中包含以下内容以防止样式泄漏和泄漏：

:host {
    all: initial; /* 1st rule so subsequent properties are reset. */
    display: block;
    contain: content; /* Boom. CSS containment FTW. */
}

我可以通过在:host属性中内联其他样式表来使用它们，但这不适用于 Font Awesome，因为它在其样式表中使用了相对路径。

我找到了这篇文章，并使用我实现的作用域 CSS 进行了尝试，但图标显示为正方形，如我的示例所示。

如何配置 next.js 以支持带有 css 模块的同步顺风 css？我想要 tailwindcss 包装整个项目：

// /tailwind.scss
:global {
  @import "tailwindcss/base";
  @import "tailwindcss/components";
  @import "tailwindcss/utilities";
}

// /test-module.css
.example {
  font-size: 36px;
}

// /pages/_app.jsx
import '../talwind.scss';
...

在示例组件中：

// /components/my-component.jsx
import css from '../test-module.css';

const Test = () => (
  <div className={`bg-red-500` ${css.example}}>Test Tailwind with CSS</div>
);

有没有办法在特定的 div 或组件上禁用 Tailwind 的预检？例如所见即所得编辑器，或者想要逐步迁移到 Tailwind。

我正在尝试在 tailiwnd 中使用禁用的变体，但它似乎不起作用。我不知道该怎么办。

如果它被禁用，我想更改按钮外观，我已经阅读了文档，它说默认情况下未启用“禁用”变体。所以我修改了我的 tailwind.config.js，现在它看起来像这样：

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {
    extend: {
      opacity: ['disabled']
    }
  },
  plugins: [],
}

我的页面中有此代码，两个按钮看起来都一样：

  <div class="text-center space-x-8">
    <button type="button" class="py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none disabled:opacity-50" tabindex="-1">
      Submit
    </button>
    <button type="button" class="py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md disabled:opacity-50" disabled tabindex="-1">
      Submit
    </button>
  </div>

我已经重新编译了我的代码并删除了我所有的浏览器缓存，但它仍然不起作用。我还需要做任何其他事情才能使其正常工作吗？

我正在关注https://tailwindcss.com/docs/guides/create-react-app上关于在 React 项目中设置 Tailwind 的文档。我一直在按照这些步骤操作，但是当我到达应该运行npx tailwindcss init以生成tailwind.config.js文件的部分时，出现以下错误：

Cannot find module 'autoprefixer'
Require stack:
- C:\Users\[user]\AppData\Roaming\npm-cache\_npx\16096\node_modules\tailwindcss\lib\cli\commands\build.js
- C:\Users\[user]\AppData\Roaming\npm-cache\_npx\16096\node_modules\tailwindcss\lib\cli\commands\index.js
- C:\Users\[user]\AppData\Roaming\npm-cache\_npx\16096\node_modules\tailwindcss\lib\cli\main.js
- C:\Users\[user]\AppData\Roaming\npm-cache\_npx\16096\node_modules\tailwindcss\lib\cli.js

我检查autoprefixer了我的node_modules文件夹中是否有并尝试重新安装它，但我遇到了同样的错误。在我的package.json，我有以下内容：

...
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
...

根据文档。我的craco.config.js文件如下：

module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

再次，根据文档。我也试过重新安装@craco/craco软件包无济于事，所以在这一点上我被卡住了。任何帮助，将不胜感激。

我正在使用 Vue 3 并尝试从以下教程中将 tailwindcss 添加到其中。https://tailwindcss.com/docs/guides/vue-3-vite#install-tailwind-via-npm

我已经使用以下命令安装了依赖项，

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

但是当我尝试使用以下命令创建配置文件时

npx tailwindcss init -p

它给了我以下错误。

npx：在 5.2s 中安装了 83 找不到模块 'autoprefixer' 需要堆栈：

• /~/.npm/_npx/33283/lib/node_modules/tailwindcss/lib/cli/commands/build.js
• /~/.npm/_npx/33283/lib/node_modules/tailwindcss/lib/cli/commands/index.js
• /~/.npm/_npx/33283/lib/node_modules/tailwindcss/lib/cli/main.js
• /~/.npm/_npx/33283/lib/node_modules/tailwindcss/lib/cli.js

我不知道为什么autoprefixer没有检测，因为我已经安装了它。甚至 package.json 都有。

{
  "name": "wooclime",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "autoprefixer": "^9.8.6",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0", …

我尝试实现前缀 last: ，但没有成功，如 Tailwind.css 文档中所示。谁能指出我做错了什么？我无法完成这项工作。

先感谢您。

反应组件

{items.map((item, i) => {
            return (
              <li
                key={i.toString()}
                v-for="(item, i) in items"
                className="pb-sm xl:pb-md last:pb-0" // This is the problematic fellow!
              >
                <div className="grid grid-cols-12">
                  <div className="col-start-2 col-span-10 md:col-start-2 md:col-span-8  pb-2 sm:pb-xs md:pb-xs lg:pb-xs xl:pb-0">
                    <div className="serif text-h5 xl:text-h4 lg:text-h4 md:text-h4 leading-snug xl:leading-tight lg:leading-tight md:leading-snug">
                      {item}
                    </div>
                  </div>
                  <div className="col-start-2 col-span-10 sm:col-start-5 sm:col-span-6 md:col-start-5 md:col-span-6 lg:col-start-5 lg:col-span-6 xl:col-start-5 xl:col-span-3 pb-xs sm:pb-xs">
                    <div className="text-p sm:text-p">{description[i]}</div>
                  </div>
                </div>
              </li>
            )
          })}