css - TailwindCSS 响应式断点在 Vue 中不起作用
问题描述
我最近为我的 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')
]
}
推荐阅读
- postgresql - Postgres | 确保至少有一排可用
- windows - 我想在 Windows 上使用 docker-compose 将 Windows 驱动器安装到 Windows 容器中
- facebook - Facebook 图表 - 权限
- javascript - Mongoose 聚合未错误:未显示特定季节电视的特定剧集且未填充
- javascript - JQuery - 添加基于 URL 的活动类,但也有不同的以下子路径
- javascript - 如何在 Android 上的 SDCard 上打开 HTML 文件
- c# - 如何在 WPF 中创建动态变化的表?
- apache-spark - 从 Kafka 主题读取文件路径,然后在结构化流中读取文件并写入 DeltaLake
- ios - 批量文件上传期间 SwiftUI 显示刷新进度
- rounding - 舍入同情表达式的一部分