CODEWITHSUNDEEP
cssvue.jstailwind-css
Arpad Gabor
Arpad Gabor

Reputation: 15278

TailwindCSS responsive break points not working in Vue

I've recently installed Tailwind for my Vue project. It took some time to get it work but finally, it worked, even with code completion in VS Code.

The problem I am facing right now is that I cannot use the breakpoints anywhere in my project.

<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.

What I want to achieve is to have the div be 1/3 when on desktop, full width on mobile. What I am getting is full width everywhere. I can't seem to find anything else like this on the internet either.

I'd like to mention that I am using VueJS, if that's of any help. Any ideas?

Thanks in advance.

Upvotes: 2

Views: 4516

Answers (1)

Arpad Gabor
Arpad Gabor

Reputation: 15278

Eventually found the solution after a break and finding a Vue project that uses Tailwind. I needed to install postcss-preset-env and add it to 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')
  ]
}

Upvotes: 2

Related Questions