Question

我最近为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，如果有帮助的话。有什么想法吗？

谢谢。

Answer 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')
  ]
}

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

1 个答案: