<divclass="self-automd:self-end"><!-- ... --></div> To learn more, check out the documentation onResponsive Design,Dark Modeandother media query modifiers. From the creators of Tailwind CSS Make your ideas look awesome, without relying on a designer. ...
For more information about Tailwind's responsive design features, check out theResponsive Designdocumentation. all sm md lg xl <div class="items-stretchsm:items-startmd:items-centerlg:items-endxl:items-baseline..."> <!-- ... --> </div> ...
<div class="wrapper"> ... </div> .wrapper { display: flex; justify-content: center; } Using Tailwind CSS it’s easier, all you have to do is to add the flex and justify-center classes:<div class="flex justify-center"> ... </div> ...
CSS3 box-align 属性 实例 对div中的子元素同时使用box-align和box-pack的居中属性: div { width:350px; height:100px; border:1px solid black; /* Internet Explorer 10 */ display:-ms-flexbox; -ms-flex-pack:center; -ms-flex-align:ce..
{ + "@types/node": "^18.11.18", + "@types/react": "^18.0.26", + "autoprefixer": "^10.4.13", + "eslint": "^8.30.0", + "postcss": "^8.4.21", + "tailwindcss": "^3.2.4", + "typescript": "^5.0.0" + } +} diff --git a/pages/_app.mdx b/pages/_app.mdx...
<divkey={i}className="flex-shrink-0 mt-5w-72"> <divclassName="relative flex flex-col items-center py-10"> <img className="mb-3 w-40 h-40 rounded-full shadow-lg object-cover" Expand Down 2 changes: 1 addition & 1 deletion2tailwind.config.js ...
Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, usehover:items-centerto only apply theitems-centerutility onhover. <divclass="flex items-stretchhover:items-center"><!-- ... --></div> ...