TailwindCSS responsive break points not working in Vue

Question

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.

Arpad Gabor · Accepted Answer · 2019-09-04 16:06:09Z

2

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

answered Sep 4, 2019 at 16:06

Arpad Gabor

15.3k4 gold badges19 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Maksim Shamihulau Over a year ago

I had an issue with breakpoints not working for container css class only in version 1.4.6. Just updating to newer version of tailwindcss helped.

Collectives™ on Stack Overflow

TailwindCSS responsive break points not working in Vue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related