<h1class="text-3xl font-bold text-center mt-4">Welcome to Tailwind CSS!</h1> </body> </html> 创建CSS: npx tailwindcss -i ./src/input.css -o ./src/output.css --watch 现在,当你在浏览器中打开 index.html 时,你应该会看到一个粗体的大标题,上面写着Welcome to Tailwind CSS! 恭喜您,...
<p class="text-gray-500">Color Gray 500</p> <p class="text-green-500">Color Green 500</p> 背景颜色:bg-[color]-[shade] <p class="bg-white">BgColor White</p> <p class="bg-red-500">BgColor Red 500</p> <p class="bg-black text-white">BgColor Black</p> 下划线颜色:underline...
<divclass="mt-20"><h2class="text-center text-4xl">Text Color</h2><divclass="grid grid-cols-2 gap-4"><div><h1class="font-semibold text-gray-200">This is text-gray-200</h1><h1class="font-semibold text-gray-600">This is text-gray-600</h1><h1class="font-semibold text-red-200...
Text Color Utilities for controlling the text color of an element. Class reference Class Properties Preview .text-transparentcolor: transparent;Aa .text-currentcolor: currentColor;Aa .text-blackcolor: #000;Aa .text-whitecolor: #fff;Aa .text-gray-100color: #f7fafc;Aa ...
// tailwind.config.jsmodule.exports={purge:[],darkMode:false,// or 'media' or 'class'theme:{extend:{},},variants:{extend:{},},plugins:[],} 使用其它文件名 要使用tailwind.config.js之外的文件名,请在命令行中将其做为参数传入: npx tailwindcss init tailwindcss-config.js ...
Modernized P3 color palette— a redesigned, more vivid color palette that takes full advantage of modern display technology. Container queries— first-class APIs for styling elements based on their container size, no plugins required. New 3D transform utilities— transform elements in 3D space directl...
<h1class="text-9xl font-bold">What is this, an Apple website?</h1> 而且，我们还将默认的不透明度比例扩展为10，以及5和95的值：<figureclass="opacity-5"><blockquote>You can't see me.</blockquote><figcaption>John Cena</figcaption></figure> 仔细阅读整个默认配置文件，以查看可用的确切信息。
Class Properties .font-sans font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; .font-serif font-family: Georgia, Cambria, "...
<divclass="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4"><divclass="shrink-0"><imgclass="h-12 w-12"src="/img/logo.svg"alt="ChitChat Logo"/></div><div><divclass="text-xl font-medium text-black">ChitChat</div><pclass="text-slate-500">...
文本颜色:text-[color]-[shade] color:颜色名称 shade:色度,取值范围为 100~900,不可对黑色或白色使用 <pclass="text-black">Color Black</p> <pclass="text-white">Color White</p> <pclass="text-red-500">Color Red 500</p> <pclass="text-blue-500">Color Blue 500</p> ...