我最近为我的 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>
观看它的动图。
我想要实现的是让div 在桌面上为 1/3,在移动设备上为全宽。我得到的是到处都是全宽。我似乎在互联网上也找不到其他类似的东西。
我想提一下我正在使用 VueJS,如果这有任何帮助的话。有什么想法吗?
提前谢谢。
最终在休息后找到了解决方案,并找到了一个使用 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')
]
}