标签: 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，我的应用程序正在启动，没有构建错误，但未生成顺风输出。

我究竟做错了什么？

是否可以覆盖@apply指令？

我有这个例子：https ://play.tai​​lwindcss.com/kyu6CxnBzB

.item {\n  @apply text-black font-light text-opacity-80 py-4 bg-gray-100;\n}\n

<ul>\n  <li class="item">About Us</li>\n  <li class="item">Success stories</li>\n  <li class="item text-red-50 bg-red-800">Contact</li>\n  <li class="item">Blog</li>\n</ul>\n

结果如下：

当我期待的时候

似乎使用 apply (item) 定义的第一个类中的值优先于之后指定的任何其他类

你会如何解决这样的场景？创建一个组件（我正在使用 svelte）似乎对此太过分了，我\xc2\xb4d喜欢某种方法来避免重复诸如“font-sans text-black text-black text-opacity-80 my-”之类的内容4 悬停：文本灰色-800 悬停：文本下划线等...”

它总是挂在同一个地方：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

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

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

我正在尝试加入顺风类并使用clsx将它们应用到按钮。默认应用一个类\'rounded-none\'，另一个类作为 prop 传入

const Button = ({\n  children, ...props\n}): JSX.Element => {\n\n  return (\n    <ADButton\n      className={clsx(\'rounded-none\', props.className)}\n      {...props}\n    >\n      {children}\n    </ADButton>\n  );\n};\n

假设我已经添加了padding-top: 0px;到按钮，如下所示

<Button\n  color="primary"\n  className="pt-0"\n>\n  {t(\'btn.add\')}\n</Button>\n

加入的类名应该是这样的\'rounded-none pt-0\'。如果没有传递 className 属性，则只需应用 \xe2\x80\x98rounded-none\xe2\x80\x99

现在遇到的问题是 \xe2\x80\x98rounded-none\xe2\x80\x99 仅适用于没有 className 属性的按钮。在带有 className 属性的按钮上，仅应用 className 属性，但不应用 \xe2\x80\x98rounded-none\xe2\x80\x99。我怎样才能解决这个问题，以便两个类都加入并应用于按钮？

我无法打开 2 份披露文件中的其中一份。

下面附上的是试图实现这一目标的内容，当我添加该static道具时，它会无限期地保持打开状态。