代码拉取完成，页面将自动刷新
这是一个练习Tailwind CSS而搭建的网页。
yarn create vite@latest my-project -- --template react
tailwind.config.js和postcss.config.js文件。yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
//tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
/** ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
jsx模版。export default function App() {
return (
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
)
}
yarn dev
将自己的自定义指令添加到Tailwind的样式里。
@layer components {
.max-container {
max-width: 1440px;
margin: 0 auto;
}
.input {
@apply sm:flex-1 max-sm:w-full text-base leading-normal text-slate-gray pl-5 max-sm:p-5 outline-none sm:border-none border max-sm:border-slate-gray max-sm:rounded-full;
}
}
将自己的自定义指令添加到Tailwind的样式里。
@layer utilities {
.padding {
@apply sm:px-16 px-8 sm:py-24 py-12;
}
.padding-x {
@apply sm:px-16 px-8;
}
.padding-y {
@apply sm:py-24 py-12;
}
.padding-l {
@apply sm:pl-16 pl-8;
}
.padding-r {
@apply sm:pr-16 pr-8;
}
.padding-t {
@apply sm:pt-24 pt-12;
}
.padding-b {
@apply sm:pb-24 pb-12;
}
.info-text {
@apply font-montserrat text-slate-gray text-lg leading-7;
}
}
xl:padding-l响应式设计中，xl表示1280px以上屏幕。指定某个样式在1280px以上屏幕生效padding-left外边距为4em。
@media (min-width: 1280px){
.xl\:padding-l {
padding-left: 4rem;
}
}
wide:padding-rwide表示在文件tailwind.config.js的theme.screens部分中自定义项目的断点为wide，值为1440px，即响应式屏幕wide的尺寸为1440px，对应媒体查询的写法是@media (min-width: 1440px) { ... }。
@media (min-width: 1440px){
.wide\:padding-r {
padding-right: 4rem;
}
}
padding-r表示根样式文件里定义的自定义指令，@layer utilities { ... }里面的.padding-r { @apply sm:pr-16 pr-8; }，表示在sm屏幕断点下，最低宽度屏幕640px时sm:pr-16对应sm屏幕下padding-right为64px，其余时为pr-8即padding-right为32px。
.padding-r {
padding-right: 2rem;
}
padding表示根样式文件里定义的自定义指令，@layer utilities { ... }里面的.padding-r { @apply sm:px-16 px-8 sm:py-24 py-12; }。
.padding {
padding-left: 2rem;
padding-right: 2rem;
padding-top: 3rem;
padding-bottom: 3rem;
}
padding-b@apply sm:pb-24 pb-12;表示在平常屏幕时底部外边距为6em即96px，小于640px时为3em即48px。
.padding-b { padding-bottom: 3rem; }
padding-x@apply sm:px-16 px-8;表示在平常屏幕时左右外边距为4em即64px，小于640px时为2em即32px。
.padding-x {
padding-left: 4rem;
padding-right: 4rem;
}
bg-pale-blue给背景颜色自定义混合的颜色。在文件tailwind.config.js的theme.extend.colors部分中自定义颜色'pale-blue': '#F5F6FF'。
.bg-pale-blue {
--tw-bg-opacity: 1;
background-color: rgb(245 246 255 / var(--tw-bg-opacity));
}
w-full设定盒子的宽度为100%。
.w-full { width: 100%; }
flex设置盒子的排布方式为flex的弹性布局。
.flex { display: flex; }
justify-between沿着容器的主轴对齐项目，以便每个项目之间有相等的空间。
.justify-between { justify-content: space-between; }
justify-center沿容器主轴中心对齐项目。
.justify-center { justify-content: center; }
items-center沿容器横轴的中心对齐项目。
.items-center { align-items: center; }
max-container自定义的类名，表示最大容器，宽度为1440px，居中，左右外边距为自动。
/** src/index.css */
@layer components {
.max-container {
max-width: 1440px;
margin: 0 auto;
}
}
flex-1允许弹性项目根据需要增大和缩小，忽略其初始大小。
.flex-1 { flex: 1 1 0%; }
gap-16控制网格和弹性盒项目之间的间距。
.gap-16 { gap: 4rem; }
max-lg:hidden小于最大屏幕在1024px时会隐藏。如一些导航栏列表仅在桌面浏览器上显示，在移动设备则不会显示。
@media not all and (min-width: 1024px){
.max-lg\:hidden { display: none; }
}
font-montserrat设置字体。
.font-montserrat { font-family: Montserrat, sans-serif; }
leading-normal根据元素当前的字体大小为元素提供相对行高。
.leading-normal { line-height: 1.5; }
text-lg控制元素字体大小。这里的text字体大小有自定义设置过。
// tailwindcss.config.js
theme.fontSize = {
xs: ['12px', '16px'],
sm: ['14px', '20px'],
base: ['16px', '19.5px'],
lg: ['18px', '21.94px'],
xl: ['20px', '24.38px'],
'2xl': ['24px', '29.26px'],
'3xl': ['28px', '50px'],
'4xl': ['48px', '58px'],
'8xl': ['96px', '106px']
}
.text-lg {
font-size: 18px;
line-height: 21.94px;
}
text-slate-gray设置文本颜色。
.text-slate-gray { color: #4a5568; }
border-2设置元素所有边的边框宽度。
.border-2 { border-width: 2px; }
border-red-500控制元素边框颜色。
.border-red-500 {
--tw-border-opacity: 1;
border-color: rgb(239 68 68 / var(--tw-border-opacity));
}
xl:flex-row将Flex项目水平放置在与文本相同的方向上。
@media (min-width: 1280px){
.xl\:flex-row { flex-direction: row; }
}
min-h-screen设置最小高度为屏幕高度。可以将某个盒子的高度与屏幕的高度保持一致。
.min-h-screen { min-height: 100vh; }
xl:w-2/5设置宽度为2/5。
@media (min-width: 1280px){
.xl\:w-2\/5 { width: 40%; }
}
flex-col将Flex项目垂直放置在与文本相同的方向上.
.flex-col { flex-direction: column; }
items-start将项目与容器横轴的起点对齐。
.items-start { align-items: flex-start; }
max-xl:padding-xmax-*的写法为断点范围，在特定断点范围处于活动状态时启动某样式。
在屏幕尺寸1280px和640px之间的间距为4rem。
@media not all and (min-width: 1280px){
.max-xl\:padding-x {
padding-left: 4rem;
padding-right: 4rem;
}
}
在屏幕尺寸小于640px的间距为2rem。
@media (min-width: 640px){
.max-xl\:padding-x {
padding-left: 2rem;
padding-right: 2rem;
}
}
max-sm:text-[72px]在屏幕尺寸小于640px的文本大小为72px。
@media (min-width: 640px){
.max-sm\:text-\[72px\] { font-size: 72px; }
}
rounded-full使用该类名创建药丸按钮。
.rounded-full { border-radius: 9999px; }
sm:max-w-sm在屏幕尺寸大于640px的盒子的最大宽度为24rem。
@media (min-width: 640px){
.sm\:max-w-sm { max-width: 24rem; }
}
object-contain调整元素内容的大小以使其包含在其容器内。
.object-contain {
-o-object-fit: contain;
object-fit: contain;
}
bg-hero设置自定义背景图片为hero。
.bg-hero {
background-image: url('assets/images/collection-background.svg');
}
-bottom-[5%]设置定位底部位移负5%。
.-bottom-\[5\%\] {
bottom: -5%;
}
capitalize设置文本转换，格式为首字母大写其余字母小写的文本内容。
.capitalize {
text-transform: capitalize;
}
break-words断词，如果需要，用于break-words在单词中间添加换行符。
.break-words {
overflow-wrap: break-word;
}
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手