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?

NoLAstNamE

2 years ago

Level 8

This is the sizing

    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px',
    },

Source: config.full.js#L813C1-L819C7

Snapey

2 years ago

Level 122

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

2 years ago

Level 4

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

Snapey

2 years ago

Level 122

and you re-built the css?

Cushty

2 years ago

Level 4

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

Cushty

2 years ago

Level 4

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

tangtang

2 years ago

Level 6

@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.