Responsive media queries

[nightowl2]

Hi All,

I'm trying tailwind for the first time over bootstrap (and loving it so far). However after reading through the docs i've got a bit of a head scratcher. I'm trying to hide table cells if the screen size is smaller than medium. So essentially on mobile only 2 cells show.

Please can someone advise on the best way to do this. I've tried various classes such as md:hidden etc & would prefer to use hidden rather than invisible. It would be great to hide on devices smaller than X rather than devices larger than X.

Thank you in advance.

[MartinHughes-BPC]

Hi nightowl2,

Tailwind works a bit differently to Bootstrap. In fact it works the opposite way! Essentially it works from the smallest breakpoint to the biggest breakpoint.

So in your case you could do something like this:

<table>
        <tr>
            <th>name</th>
            <th>age</th>
            <th class="hidden md:block">fave beer</th>
        </tr>

        <tr>
            <td>martin</td>
            <td>not telling!</td>
            <td class="hidden md:block">prefer rum!</td>
        </tr>

    </table>

Which means those columns (fave beer) are hidden until the md breakpoint is reached, but once it is and above it will show. You can also then override at higher breakpoints by setting eg: xl:bg-blue-200 which would only apply this background at xl breakpoints and above.

Hope that helps.

Cheers,
Martin.

[nightowl2]

Hi @MartinHughes-BPC thank you for your comment. Unfortunately on mobile devices & desktop the block class is causing the fields to be stacked ontop of eachother rather than retaining the distribution of fields across a row. I've just gone with a good ol' fashioned media query for now that hides the cells based on device size. Thank you for your help though.