Tailwind Css 自定义断点注意事项

官网网址

tailwind css 断点 https://www.tailwindcss.cn/docs/breakpoints

注意事项

1. 默认断点失效
   正常效果 如下图 及代码 使用了 md来控制响应式
   使用插件 Tailwind CSS IntelliSense 可以使用Tailwind CSS 的代码提示

   名称: Tailwind CSS IntelliSense
   ID: bradlc.vscode-tailwindcss
   说明: Intelligent Tailwind CSS tooling for VS Code
   版本: 0.6.14
   发布者: Brad Cornes
   VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
   

   提示如下
   
   显示效果如下
   
   屏幕小于 768px 时
   

使用的代码如下

 <div class="md:flex">
        <div class="md:flex-shrink-0">
          <img
            class="h-48 w-full object-cover md:w-48 object-scale-down"
            src="@/assets/logo.png"
            alt="Man looking at item at a store"
          />
        </div>
        <div class="p-8">
          <div
            class="
              uppercase
              tracking-wide
              text-sm text-indigo-500
              font-semibold
            "
          >
            Case study
          </div>
          <a
            href="#"
            class="block
              mt-1
              text-lg
              leading-tight
              font-medium
              text-black
              hover:underline
            "
            >Finding customers for your new business</a
          >
          <p class="mt-2 text-gray-500">
            Getting a new business off the ground is a lot of hard work. Here
            are five ideas you can use to find your first customers.
          </p>
        </div>
      </div>

上面这部分未使用 自定义断点
当使用自定义断点时发现代码提示 md等不见了 说明 配置断点时默认的断点配置会被移除 但是官网并未做出提示
分析如下：
自定义断点
tailwind.config.js 文件的 theme.screens 部分定义您项目的断点

// tailwind.config.js
module.exports = {
    
    
 theme: {
    
    
   screens: {
    
    
   
   }
 }
}

如上代码 如果 screens内的属性为空是 tailwindcss 默认断点将会失效 代码提示也不见了


所以 设置 screens内的属性 时注意 如果要使用默认的断点时需要把官网的 默认断点 加入进去

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',
      // 上面的是默认断点
      // 下面为自定义断点
      'tablet': '640px',
      'laptop': '1024px',
      'desktop': '1280px'
    },