主页 / coding / 问题 / 79552042
Accepted
ZloiGoroh
Asked: 2025-04-03 13:08:57 +0800 CST

容器的 Tailwind 填充设置

  • 772

我在 Nuxt 项目中使用 TailwindCSS v3，并具有以下设置：

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%',
          }
        },
      },
    },
  },
},

除了容器填充之外，它运行得很好。它总是使用默认设置。在样式中，我看到它会覆盖相同值的填充。

在此处输入图片描述

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 个回答

  1. Best Answer

    问题是你要求容器的100%尺寸从 xl 开始。但是，它会调整相对于此的填充，如下所示：

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

    但这不是有效的语法，因为只应使用可计算的值px，如em、、、等。请参阅：remvw

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

    需要注意的是，在这种情况下，100vw可能小于1280px，因此在较小的屏幕上可能会更早生效。我宁愿使用固定值来获得更可靠的结果。

    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

相关问题