标签: tailwind-css

有人成功使用VueJS，PostCss和Tailwind在Storybook中进行组件开发来建立项目吗？

我已经走了这么远：

1. 新vue项目（vue-cli 3.0.5）
2. @ storybook / vue（4.0.0-alpha.25）
3. tailwindcss（0.6.5）
4. 使用创建组件 <style lang="postcss"> ... </style>
5. @apply在样式块内使用Tailwind 将实用程序类应用于组件

我遇到的问题是，lang="postcss"运行故事书时，在编译过程中我创建的要使用的故事的任何组件都会失败。

我尝试添加一个自定义webpack配置来停止错误，但我的所有组件均未设置样式。

const path = require('path')

module.exports = {
    module: {
        rules: [
            {
                test: /\.postcss$/,
                loaders: ["style-loader", "css-loader", "postcss-loader"],
                include: path.resolve(__dirname, '../')
            }
        ]
    }
}

我也尝试将我app.postcss的stories.js文件（导入顺风）导入文件本身无济于事。任何帮助，将不胜感激。

我使用 TailwindCSS 创建了一个 VueJS 按钮组件。我的目标是为该按钮组件提供一些基本样式（使用 tailwindcss 类），并在需要时选择覆盖它们（再次使用 tailwind css 类）。

例如，这是Button组件的简化版本：

// Button.vue

<template>
  <button class="bg-green-500 text-white py-2 px-4 rounded">
    Click Me
  </button>
</template>

这是我在另一个文件中使用该组件的示例：

// index.vue

<Button></Button>
<Button class="bg-red-600"></Button>
<Button class="bg-blue-600"></Button>

问题是这只能起到一半的作用。也就是说，bg-blue-600确实覆盖了bg-green-500我在Button.vue. 但bg-red-600也不能忽略的背景颜色（presumbably，因为bg-red-600来之前在CSS源代码。

因此，我想知道如何正确设置它？也就是说，我如何为Button组件提供一些基本样式（再次使用 tailwind css 类），同时还提供使用 tailwind css 类覆盖这些样式的选项。

谢谢。

我已经进行了 Prettier 设置，可以在 VSCode 中保存 CSS 文件时进行格式化。我在我的一个项目中使用 TailwindCSS 并使用1.7 中最新添加的内容，更漂亮地格式化文件并在单个冒号后添加一个空格，如下所示：

格式化前

.container {
  @apply flex;
  @apply flex-col;
  @apply lg:flex-row;
}

格式化后

.container {
  @apply flex;
  @apply flex-col;
  @apply lg: flex-row;
}

lg:在和之间添加一个空格flex-row。

有人知道如何解决这个问题吗？目前我只是忽略 CSS 文件来规避这个问题。

解决方案

Prettier 没有被选为 CSS 的默认格式化程序，仅适用于 TS 和 JS。将 CSS 的默认格式化程序更新为 Prettier 解决了这个问题。

尝试在我的 tailwindcss 样式页面中替换行颜色，下面的代码对我的 <tr> 没有影响：

<style>
    tr:nth-child(even) {
        class="bg-gray-50";
    }
    tr:nth-child(od) {
        class="bg-white";
    }
</style>

请问我错过了什么？

我有一个问题要问你们（和姑娘们；））

有谁知道 Tailwind CSS 的现有插件可以使字体大小响应（除了字体大小固定的下屏幕和​​上屏幕大小）。像那样：

body { font-size: calc(16px + (26 - 16) * ((100vw - 768px) / (1280 - 768))); }
@media screen and (max-width: 768px) { body { font-size: 16px; }}
@media screen and (min-width: 1280px) { body { font-size: 26px; }}

• 较低的屏幕宽度- 固定字体大小
• 屏幕尺寸介于两者之间- 响应式字体大小从16 像素到26 像素
• 更宽的屏幕宽度- 固定字体大小

我react-ts使用创建了一个新应用程序yarn create @vitejs/app my-app --template react-ts。

我使用安装了顺风yarn add --dev tailwindcss@latest postcss@latest autoprefixer@latest。

我初始化了顺风：npx tailwindcss init -p。

我设置from并to在postcss.config.js：

module.exports = {
  from: 'src/styles/App.css',
  to: 'src/styles/output.css',
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

我App.css在以下位置创建了一个文件src/styles：

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

根据https://vitejs.dev/guide/features.html#postcsspostcss-load-config ，允许任何有效的语法。from并且to 似乎是被允许的。

当我调用yarn devwhich本质上运行时vite，我的应用程序正在启动，没有构建错误，但未生成顺风输出。

我究竟做错了什么？

我有一个内联块，它的高度至少应为 1 rem，但如果内容不适合，它会扩展。如果没有 Tailwind，我会通过以下方式解决它。

<div style="display:inline-block; min-height:1rem;">
    content...
</div>

然而，Tailwind 提供的唯一 min-h 类是min-h-0、min-h-full和min-h-screen。那么我应该在这里添加哪个类来以“Tailwind 方式”编写它？

<div class="inline-block ???">
    content...
</div>

它总是挂在同一个地方：reify:tailwindcss: timing build:queue Completed in [number]ms

我什至尝试过走开并让它过夜，但无济于事。真正令人沮丧的是，大约一周前，这为我的另一个项目工作，但在过去的两天里，我遇到了这堵墙。

我尝试了几种我在这里看到的方法（每次删除node_modules文件夹）：

\n
• npm config set registry http://registry.npmjs.org/
\n
• npm cache clear --force
\n
• 将 NPM 降级到 v6
\n

这是package.json文件：

    "private": true,\n    "scripts": {\n        "dev": "npm run development",\n        "development": "mix",\n        "watch": "mix watch",\n        "watch-poll": "mix watch -- --watch-options-poll=1000",\n        "hot": "mix watch --hot",\n        "prod": "npm run production",\n        "production": "mix --production"\n    },\n    "devDependencies": {\n        "@tailwindcss/forms": "^0.2.1",\n        "alpinejs": "^2.7.3",\n        "autoprefixer": "^10.1.0",\n        "axios": "^0.21",\n        "laravel-mix": "^6.0.6",\n        "lodash": "^4.17.19",\n …

有谁知道如何从测试文件加载 TailwindCSS？

我尝试使用与 VueJS 相同的方法，导入 css 文件，但它只是不加载样式。

这是我添加 cypress 组件测试的提交： https://github.com/vicainelli/cypress-component-testing-react-tailwindcss/commit/2fa25833cb965fadfeda6c53b80a23bb12b3b1c5

我知道在 mount 中有一些选项可以传递样式表，例如

像这样：

mount(<App />, { stylesheet: "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" });

但我想使用我的自定义CSS。

我已经使用 npm 安装了 Tailwind CSS，我正在使用"tailwindcss": "^2.2.15"版本。当我尝试在我的段落上应用列表样式类型时，它不起作用，它不显示任何带有内容的样式类型。

这是我的代码，在CODE上运行良好play.tailwindcss.com

但是，当我在本地代码编辑器中编写完全相同的代码时，它无法按预期工作。

当我在本地运行它时，完全相同的代码的屏幕截图。