如何在 Tailwind CSS 里面设置响应式布局？

2023-10-12

响应式布局，即响应不同屏幕大小的界面，运用不同大小的元素（文字、画框等）

最简单的就是改变sm、md、lg大小，我们可以这样设置：

className = "hidden md:block md:w-[300px]"

以上的代码意思为——

当屏幕尺寸为sm（small）时，该元素隐藏（hidden），而当md（medium）以上时，显示（block），且元素宽度固定为 300px。

注意：

因为响应式布局是从小到大覆盖的，所以一般不会用到sm:，一般是md或者lg以上设置状态

不同尺寸大小参考

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      // => @media (min-width: 640px) { ... }

      'md': '768px',
      // => @media (min-width: 768px) { ... }

      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }

      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }

      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }
    }
  }
}

这个尺寸也是可以自定义的，按照官网链接设置即可。

参考资料

TailwindCSS 官网 – 响应式设计