likes
comments
collection
share

Tailwind CSS取消移动端优先

作者站长头像
站长
· 阅读数 886

Tailwind CSS无疑是最好的CSS解决方案之一,但是他默认是移动端优先。也就是说不加"md","lg“等前缀就默认sm移动端样式,这样的配置使开发PC为主的响应式网页很麻烦。 是只需要修改tailwind.config.js就可以解决。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{tsx,html}"],
  theme: {
    extend: {},
    screens: {
      // 设置PC端优先
      sm: { max: "768px" },
    },
  },
  plugins: [require("@tailwindcss/line-clamp")],
};

设置screens,并且不使用默认的min,设置为max即可。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{tsx,html}"],
  theme: {
    extend: {},
    screens: {
      // 设置PC端优先
      sm: { max: "768px" },
    },
  },
  plugins: [require("@tailwindcss/line-clamp")],
};

这样使用就可以啦,sm:hidden 默认手机上组件隐藏,其他样式做用于电脑,修改为PC优先

Tailwind CSS取消移动端优先

Tailwind CSS取消移动端优先