标签: tailwind-css

使用 Tailwind CSS，我想在内容太大而无法适应屏幕宽度时应用滚动效果。我有一个 div 容器来保存我想要滚动的子元素。当我使用一个部分来保存图像和用户名（如下所示）时，它们都会缩小以适应屏幕尺寸。这不是我想要的。我只想在滚动时显示几个部分和其余部分。我缺少什么？

不工作

<div class="flex overflow-x-auto space-x-8">
<section class="h-13 w-13 rounded-full border-2 border-purple-300">
  <span><img src="download.jfif" class="h-13 w-13 rounded-full border-2 border-purple-300" alt=""></span>
   <span>John</span>
</section>
<section class="h-13 w-13 rounded-full border-2 border-purple-300">
  <span><img src="download.jfif" class="h-13 w-13 rounded-full border-2 border-purple-300" alt=""></span>
   <span>John</span>
</section>
<section class="h-13 w-13 rounded-full border-2 border-purple-300">
  <span><img src="download.jfif" class="h-13 w-13 rounded-full border-2 border-purple-300" alt=""></span>
   <span>John</span>
</section> 
</div>

如果我像下面这样说，它就可以工作，但我不希望这样。

<div class="flex overflow-x-auto space-x-5"> 
      <img src="download.jfif" class="h-10 w-10 rounded-full" alt="Bhutan">
      <img src="download.jfif" class="h-10 w-10 rounded-full" alt="Bhutan">    
      <img src="download.jfif" class="h-10 w-10 …

我正在尝试学习如何使用 Tailwind 动画。我正在绝望地尝试制作的动画是：

Entering: "duration-200 ease-out"
  From: "opacity-0 scale-95"
  To: "opacity-100 scale-100"
Leaving: "duration-100 ease-in"
  From: "opacity-100 scale-100"
  To: "opacity-0 scale-95"

我想要设置动画的元素是：

 <div class="absolute top-0 inset-x-0 p-2 duration-200 ease-out transition transform origin-top-right">

现在我不太确定到底要做什么，因为这个动画应该只在我尝试显示时才运行：

<div class="absolute top-0 inset-x-0 p-2 duration-200 
ease-out transition transform origin-top-right" style="${this.showMenu ? '' : 'display:none'}">

然而，这并没有真正给我一个动画结果。接下来我可以尝试什么？

编辑：这个问题现已被弃用，因为 tailwind 3.0.0 版本可以与 React 一起使用，而不必使用 CRACO。

当尝试在 JIT 模式下将 Tailwind 与 React 结合使用时，我添加的类没有样式，即使刷新页面后也是如此。我必须重新启动服务器才能使样式生效。

tailwind.config.js：

module.exports = {
    mode: "jit",
    purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
    ...
}

craco.config.js：

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

包.json：

{
    "name": "random-name",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@craco/craco": "^6.3.0",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-scripts": "4.0.3",
        "web-vitals": "^1.1.2"
    },
    "scripts": {
        "start": "craco start",
        "build": "craco build",
        "test": "craco test",
        "eject": "react-scripts eject"
    },
    "devDependencies": {
        "@tailwindcss/postcss7-compat": …

我正在尝试用Vue3、tailwindcss 和 Vite制作一个项目