Cushty's avatar

Something strange with tailwind and hidden

Quick question if you dont mind, something very strange is happening if i set this the h1 is still not visible on any viewport width

<h1 class="hidden md:block">hello</h1>

if i add this it works as expected, it seems like md, lg or larger does not work

<h1 class="hidden sm:block">hello</h1>

do you know what could be causing this issue?

0 likes
7 replies
Snapey's avatar

is it visible without the hidden?

Elements might not be visible for a number of reasons.

  • layout
  • color
  • background color
  • parent hidden
  • incorrect font size
  • elements stacked on top
Cushty's avatar

Hi, the only element on the page is the H1, nothing else, the hidden default and the sm: works well but if I add md:, lg: or more it stays hidden, i even tested in Tailwind play and it works how its suppoed to. Vite config

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

Tailwind config

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [forms],
};

Blade file:

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    @vite('resources/css/app.css')
</head>
<body>
    <h1 class="hidden sm:block">hellow</h1>

</body>
</html>

https://ibb.co/TYgDzbX https://ibb.co/7NxxWz3

Thanks for the help

Cushty's avatar

I have npm run dev running, does this rebuild and allow changes? Thanks

Cushty's avatar

Hi is there anything else you recommend I can do? Thanks

tangtang's avatar

@Cushty

may be this will help.

from the image you provided inspect element when using sm:blok it show @media min-width in styles console but if using md:block the @media min-width is not showing in styles console

Verify your Tailwind CSS configuration (tailwind.config.js) to ensure that the md breakpoint is correctly defined. The md breakpoint should be set to 768px by default. If you have customized the breakpoints, double-check that they are correctly defined.

Please or to participate in this conversation.