我使用 Rails 6.2.1 创建了一个全新的项目，并添加了tailwindcss-rails。其中一些有效，但例如颜色似乎不起作用。当我将https://play.tai​​lwindcss.com/中的片段嵌入到我的项目中时，它看起来像这样：

我所有的源代码都在这里https://github.com/pupeno/imok

有什么想法吗？

谢谢。

是否可以将转换与组悬停伪选择器一起使用？我可以让组悬停来处理不转换的事情，例如文本颜色，但在执行诸如 translate-x 或缩放之类的事情时，我无法让它工作。下面是一个例子。内部 div 上的组悬停变换都不适合我，但组悬停适用于背景和文本工作。

<div class="group">
  <div id="inner" class="transform group-hover:translate-x-1/2 group-hover:scale-110 group-hover:bg-blue-200">
       <p class="group-hover:text-white">some text</p>
       </div>
</div>

难道我做错了什么？这是它的实际代码笔

在带有 tailwindcss 2 的 Laravel 8 应用程序中，我想在自定义类中设置 2 个悬停条件：

.btn_action_item {
    @apply py-1 px-3 block hover:bg-green-500 hover:font-bold text-gray-100;
}

但我得到了错误：

The `hover:font-bold` class does not exist. If you're sure that `hover:font-bold` exists, make sure that any `@import` statements are being properly processed before Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.

如果我只留下 1 个悬停： - 则编译正常。看起来这是有效的语法，但是哪个有效？

修改： 由于这是项目中的 laravel 8 项目，我只发现 1 个文件 /vendor/laravel-frontend-presets/tailwindcss/src/tailwindcss-stubs/tailwind.config.js 内容为：

module.exports = {
  purge: [ …

我想将 tailwindcss 添加到新的 Rails 5.2.5 项目中。因为我喜欢顺风但知道它的重量，我也想要一个清除CSS模块。

我遵循了几个设置指南以及官方文档的说明。我还尝试通过gems安装tailwind（https://github.com/rails/tailwindcss-rails，https://github.com/IcaliaLabs/tailwindcss-rails ） ，但由于所有解决方案都基于rails 6作品。我也不知道 webpack 实际做了什么，所以我宁愿不使用它，而是通过资产管道使用 tailwind，而且还进行类清除。

我在构建过程中有点迷失。有没有关于如何在 5 号铁轨而不是 6 号铁轨设置顺风的方便指南？我真的很喜欢大多数宝石的自动方法，但找不到方便的解决方案。

谢谢你！

我的 js 文件中有一个数组，其中列出了所有国家公园以及访问状态。

var parksList = new Vue({\n  el: "#parks",\n  data: {\n    parks: [\n      { name: "Acadia", state: "Maine", status: "Pending" },\n      { name: "American Samoa", state: "American Samoa", status: "Pending" },\n      { name: "Arches", state: "Utah", status: "Visited" },\n      ...\n

根据状态文本（“待处理”与“已访问”），我想有条件地将两个顺风类应用于以下跨度。

<span class="py-1 px-3 rounded-full text-xs">{{park.status}}</span>\n

\n
• 如果status = "Pending" \xe2\x80\x94> 应用类bg-purple-200和\n text-purple-600
\n
• 如果status = "Visited" \xe2\x80\x94> 应用类bg-green-200和text-green-600
\n

这可以使用 v-bind:class 和 …

我正在尝试使用 NextJs 和 Tailwinds CSS 来制作一个项目。但是，每当我尝试使用自定义颜色作为背景颜色时，它都会抛出此错误：

Failed to compile
./styles/globals.css:7:12
Syntax error: /Users/anishkunapareddy/Desktop/Projects/React/hulu-clone/styles/globals.css The `bg-[#06202A]` class does not exist. If you're sure that `bg-[#06202A]` exists, make sure that any `@import` statements are being properly processed before Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.

  5 | @layer base {
  6 |   body {
> 7 |     @apply bg-[#06202A] text-gray-300;
    |            ^
  8 |   }
  9 | }

代码

索引.js

import …

我已经尝试了几个小时将图像置于该表的中心，但无法使其工作。该图像位于此代码的中间。我希望这是一个可行的例子。

<table class="container mx-auto mt-2">
    <thead>
    @foreach($posts as $post)
        <tr>
            <th class="p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell">Title</th>
            <th class="p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell">Image</th>
            <th class="p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell">Status</th>
            <th class="p-3 font-bold uppercase bg-gray-200 text-gray-600 border border-gray-300 hidden lg:table-cell">Action</th>
        </tr>
    </thead>
    <tbody>
        <tr class="bg-white lg:hover:bg-gray-100 flex lg:table-row flex-row lg:flex-row flex-wrap lg:flex-no-wrap mb-10 lg:mb-0">
            <td class="w-full lg:w-auto p-3 text-gray-800 text-center  border border-b block lg:table-cell relative lg:static">
                <span class="lg:hidden absolute top-0 …

我想在里面有 1 行和 3 列。所以我在一个网格 div 中创建了 3 个 div，它有一个“grid-cols-3”类，但我得到了 3 个原始数据和 1 个列。

<div class="grid grid-cols-3">
    <div> Col 1 </div>
    <div> Col 2 </div>
    <div> Col 3 </div>
</div>

然后我得到了

但是当我将“grid-col-3”更改为“grid-col-6”时，它起作用了！

    <div class="grid grid-cols-6">
      <div> Col 1 </div>
      <div> Col 2 </div>
      <div> Col 3 </div>
   </div>

然后我得到了

我是自学成才的，没有什么好的导师。我知道如何使用像“grid-template”这样的 CSS 来做到这一点，但我使用 Tailwind 来更快地部署 Laravel 和 Livewire。

我试图为我的博客开发一个新功能，即用于撰写文章的 Markdown 编辑器。

我选择了@tailwindcss/typographymarkdown -it来做到这一点，所以这是我的全部依赖项：

包.json

{
 "dependencies": {
    "firebase": "^9.0.0-beta.7",
    "markdown-it": "^12.2.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "@babel/preset-react": "^7.14.5",
    "@tailwindcss/typography": "^0.4.1",
    "autoprefixer": "^10.3.2",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.2.0",
    "dotenv-webpack": "^7.0.3",
    "html-webpack-plugin": "^5.3.2",
    "postcss": "^8.3.6",
    "postcss-cli": "^8.3.1",
    "postcss-loader": "^6.1.1",
    "style-loader": "^3.2.1",
    "tailwindcss": "^2.2.7",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.0.0"
  }
}

下面的代码是该功能的组件，包括编辑区域和预览区域。然而，这并没有奏效。

当我运行此代码时，它会像这样呈现，而无需印刷<h1>标签。

但是，如果我md.render(markdown)用<h1>hello</h1>（降价-它的渲染结果）替换，它似乎“有效”，看起来像这样。

编辑器.jsx

{
 "dependencies": {
    "firebase": "^9.0.0-beta.7",
    "markdown-it": …

我制作了一个 MessageBanner 组件，并想从中制作多个横幅，例如 MessageSuccess（绿色主题）和 MessageError（红色主题）。我尝试传递背景颜色、文本颜色和边框颜色的类名，但没有成功。请帮忙。

这是 MessageBanner.tsx。

export const MessageBanner: VFC<Props> = memo(props => {
  const { title, description, bgColor, textColor, borderColor } = props
  return (
    <>
      <div
        className={`${bgColor} ${textColor} ${borderColor} pointer-events-autoborder-t-4 rounded-b  px-4 py-3 shadow-md duration-1000`}
        role='alert'
      >
        <div className='flex'>
          <div>
            <p className='font-bold'>{title}</p>
            <p className='text-sm'>{description}</p>
          </div>
        </div>
      </div>
    </>
  )
})

这是 MessageSuccess 组件。我尝试不使用“.”，例如使用“bg-green-100”而不是“.bg-green-100”，但都没有成功。

export const MessageSuccess: VFC = () => {
  return (
    <MessageBanner
      title='Welcome Back'
      description='You have successfully logged in'
      bgColor='.bg-green-100'
      textColor='.green-900'
      borderColor='.border-green-500'
    />
  )
} …