Skip to content

How to only apply compact to timeline on mobile? #3309

Answered by garth
garth asked this question in Q&A

You must be logged in to vote

It seems that a workaround is to add a set of "desktop first" breakpoints to the tailwind config.

  theme: {
    extend: {
      screens: {
        'less-than-2xl': { max: '1535px' },
        'less-than-xl': { max: '1279px' },
        'less-than-lg': { max: '1023px' },
        'less-than-md': { max: '767px' },
        'less-than-sm': { max: '639px' },
      },
    },
  },

Then we can do the following:

<ul class="timeline timeline-vertical less-than-md:timeline-compact">
  ...
</ul>

Not ideal but it works

Replies: 1 comment 3 replies

You must be logged in to vote
3 replies
@saadeghi

@garth

@saadeghi

Answer selected by garth
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet
2 participants