Início / coding / Perguntas / 79552042
Accepted
ZloiGoroh
Asked: 2025-04-03 13:08:57 +0800 CST

Configurações de preenchimento do Tailwind para contêiner

  • 772

Eu uso TailwindCSS v3 em um projeto Nuxt e tenho as seguintes configurações:

postcss: {
  plugins: {
    tailwindcss: {
      content: ['./src/**/*.{scss,vue}'],
      theme: {
        screens: {
          xs: '375px',
          sm: '576px',
          md: '768px',
          lg: '1024px',
          xl: '1280px',
          xxl: '1400px'
        },
        container: {
          center: true,

          padding: {
            DEFAULT: '20px',
            xl: '40px',
          },

          screens: {
            DEFAULT: '1280px',
            xl: '100%',
          }
        },
      },
    },
  },
},

E funciona perfeitamente bem, exceto pelo preenchimento do contêiner. Ele sempre usa as configurações padrão. Em estilos, vejo que ele substitui o preenchimento pelo mesmo valor.

insira a descrição da imagem aqui

tailwind.config = {
  theme: {
    screens: {
      xs: '375px',
      sm: '576px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      xxl: '1400px'
    },
    container: {
      center: true,

      padding: {
        DEFAULT: '20px',
        xl: '40px',
      },

      screens: {
        DEFAULT: '1280px',
        xl: '100%',
      }
    },
  },
}
<script src="https://cdn.tailwindcss.com"></script>

<div class="container bg-gray-100">
  <h1 class="text-2xl font-bold text-center">Tailwind Container Example</h1>
  <p class="text-center mt-4 bg-red-200">
    Click to Full Page for XL
  </p>
</div>

nuxt.js

1 respostas

  1. Best Answer

    O problema é que você está pedindo para o container ter 100%tamanho de xl em diante. No entanto, ele ajusta o padding relativo a isso, assim:

    @media (min-width: 100%) { /* Error */
    .container {
        max-width: 100%;
        padding-right: 40px;
        padding-left: 40px;
    }
}

    Mas isso não seria uma sintaxe válida, pois somente valores calculáveis ​​como px, em, rem, vw, etc. devem ser usados. Veja:

    @media (min-width: 100vw) {
    .container {
        max-width: 100vw;
        padding-right: 40px;
        padding-left: 40px;
    }
}


    tailwind.config = {
  theme: {
    screens: {
      xs: '375px',
      sm: '576px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      xxl: '1400px'
    },
    container: {
      center: true,

      padding: {
        DEFAULT: '20px',
        xl: '40px',
      },

      screens: {
        DEFAULT: '1280px',
        xl: '100vw', // instead of '100%',
      }
    },
  },
}
    <script src="https://cdn.tailwindcss.com"></script>

<div class="container bg-gray-100">
  <h1 class="text-2xl font-bold text-center">Tailwind Container Example</h1>
  <p class="text-center mt-4 bg-red-200">
    Click to Full Page for XL
  </p>
</div>

    E é importante notar que, neste caso, 100vwpode ser menor que 1280px, então pode ter efeito mais cedo em telas menores. Eu preferiria usar valores fixos para resultados mais confiáveis.

    tailwind.config = {
  theme: {
    screens: {
      xs: '375px',
      sm: '576px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      xxl: '1400px'
    },
    container: {
      center: true,

      padding: {
        DEFAULT: '20px',
        xl: '40px',
      },

      screens: {
        DEFAULT: '1280px',
        xl: '1400px', // instead of '100%',
      }
    },
  },
}
    <script src="https://cdn.tailwindcss.com"></script>

<div class="container bg-gray-100">
  <h1 class="text-2xl font-bold text-center">Tailwind Container Example</h1>
  <p class="text-center mt-4 bg-red-200">
    Click to Full Page for XL
  </p>
</div>

    • 1

relate perguntas