css Question posted in
Some basic documentation can be found here.

Tailwind CSS style Not applying

where the error is occurred?
this is my end points:
theme: {
screens: {
‘mobile-sm’: ‘320px’,
‘mobile-md’: ‘481px’,
‘tablet’: ‘769px’,
‘desktop-sm’: ‘1025px’,
‘desktop-md’: ‘1201px’
},

I need to apply style as, flex-col in the mobile view and flex-row in desktop view

Tags:

2

Answers


  1. 0

    When you’re in-line styling the element try something like this

    <div className="flex-col md:flex-row">
Content
</div>

    sm md and lg will use @media queries for each respective breakpoint which, by default – I believe – are set to 640p, 768px, and 1024px.

    It’s common practice to style smaller views first as they, tend to, need more fine-tuned styling. Keep in mind you can override styles like this:

    <div className="text-lg md:text-2lx">
This text is large on mobile but 2XL on desktop
</div>
    Login or Signup to reply.
  2. 0

    If you want to apply your own breakpoints, then do the following:

    <div className="flex flex-col desktop-sm:flex-row">
  Content
</div>

    Tailwind CSS encourages this mobile-first approach.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search