官网网址
tailwind css 断点 https://www.tailwindcss.cn/docs/breakpoints
注意事项
默认断点失效
正常效果 如下图 及代码 使用了 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'
},