Tailwind CSS - 屏幕

Tailwind CSS 屏幕允许您为项目指定默认断点。

在 theme.screens 中设置项目的断点。键成为响应式修饰符（例如 md），值设置每个断点的最小宽度。

/** @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) { ... }
    }
    }
}

覆盖默认值

通过在 theme 键下添加自定义屏幕来替换默认断点。未覆盖的默认值将丢失。

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

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

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

覆盖单个屏幕

通过在“theme.extend”下添加自定义值来覆盖单个屏幕大小。这会替换默认值，同时保持顺序。

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

添加更大的断点

您可以使用“extend”键轻松添加更大的断点。它会添加到列表的末尾

/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
    extend: {
        screens: {
        '3xl': '1600px',
        },
    },
    },
    plugins: [],
}

添加更小的断点

如果要添加一个额外的较小断点，则不能使用 extend，因为较小断点将添加到断点列表的末尾，并且断点需要按从小到大的顺序排序才能与最小宽度断点系统一起按预期工作。

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
    theme: {
    screens: {
        'xs': '475px',
        ...defaultTheme.screens,
    },
    },
    plugins: [],
}

使用自定义屏幕名称

您还可以为自定义屏幕选择自己的名称。这将在响应式修饰符中使用。

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

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

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

您的响应式修饰符将反映这些自定义屏幕名称，因此在 HTML 中使用它们将如下所示

<div class="grid grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4">
  <!-- ... -->
</div>

最大宽度断点

如果要使用最大宽度断点，可以轻松地将屏幕指定为具有“max”键的对象。确保将最大宽度断点从大到小列出，以便它们能够正常工作。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      '2xl': {'max': '1535px'},
      // => @media (max-width: 1535px) { ... }

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

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

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

      'sm': {'max': '639px'},
      // => @media (max-width: 639px) { ... }
    }
  }
}

固定范围断点

如果希望断点同时指定最小宽度和最大宽度，请一起使用 min 和 max 键。

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

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

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

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

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

多范围断点

如果希望断点在多个范围内工作，您可以轻松地通过使用单个定义来覆盖不同的尺寸。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': '500px',
      'md': [
        // Sidebar appears at 768px, so revert to `sm:` styles between 768px
        // and 868px, after which the main content area is wide enough again to
        // apply the `md:` styles.
        {'min': '668px', 'max': '767px'},
        {'min': '868px'}
      ],
      'lg': '1100px',
      'xl': '1400px',
    }
  }
}

自定义媒体查询

如果希望完全控制媒体查询，请使用“raw”键。它允许您完全按照您想要的方式编写查询。

/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
    extend: {
        screens: {
        'tall': { 'raw': '(min-height: 800px)' },
        // => @media (min-height: 800px) { ... }
        }
    }
    }
}