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: [],
}

添加较小的断点

如果您想添加额外的小断点，则不能使用扩展，因为小断点会被添加到断点列表的末尾，并且断点需要按从小到大的顺序排序，才能在最小宽度断点系统中正常工作。

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