TailwindCSS 响应式断点在 Vue 中不起作用

Posted 2023-02-22

【中文标题】TailwindCSS 响应式断点在 Vue 中不起作用

【英文标题】：TailwindCSS responsive break points not working in Vue

【发布时间】：2020-01-07 09:07:53

【问题描述】：

我最近为我的 Vue 项目安装了 Tailwind。花了一些时间让它工作，但最终，它工作了，即使在 VS Code 中完成代码。

我现在面临的问题是我无法在项目的任何地方使用断点。

<div class="container mx-auto">
    <div class="card w-full sm:w-full md:w-1/2 lg:w-1/3 xl:w-1/3">
        // Content
    </div>
</div>

Watch a gif of it.

我想要实现的是让 div 在桌面上为 1/3，在移动设备上为全宽。我得到的是到处都是全宽的。我似乎在互联网上也找不到其他类似的东西。

我想提一下我正在使用 VueJS，如果这有帮助的话。有什么想法吗？

提前致谢。

【参考方案1】：

休息后终于找到了解决方案，找到了一个使用 Tailwind 的 Vue 项目。我需要安装postcss-preset-env 并将其添加到postcss.config.js。

npm install postcss-preset-env --save-dev

postcss.config.js

module.exports = 
  plugins: [
    require('postcss-preset-env')( stage: 0 ),
    require('tailwindcss')('tailwind.js'),
    require('autoprefixer')
  ]

【讨论】：

我遇到了一个问题，即断点不适用于 container css 类，仅在版本 1.4.6 中。只需更新到新版本的 tailwindcss 就有帮助。