Is there any way to disable Tailwind's responsive?

user_5125994 0
Viewed 150

I am planing to integrate Tailwind in my existing project. I don't want it response as I resize the screen, because I have to design separately for Desktop and Mobile. For Desktop when resize screen I want to keep my design not responsive so that user can have horizontal scroll view at the bottom.

tailwind-css
2 Answers

You can design your site based on breakpoints and you can customize breakpoints check here.

Add all classes with pre-fix lg or xl like, lg:bg-red-400. so this css add only after specific breakpoints.

user_196713940

Tailwind is mobile-first by default.

What you can do to keep your "mobile" styles and add Tailwind for "desktop" is use a prefix for the Tailwind utility classes.

And with a breakpoint prefix, eg md or lg

// config.tailwind.js
module.exports = {
  prefix: 'tw-',
  theme: {
    extend: {
      // ...
    },
  },
  plugins: [],
}

You can check a simple demo here: https://play.tailwindcss.com/wef6kKa9D1

user_20929690
Related