<inputtype="text"class="relative outline-none rounded px-2 py-1 w-full bg-white shadow text-sm text-gray-700 placeholder-gray-400 focus:outline-none focus:shadow-outline"placeholder="placeholder"/> placeholder-gray-400实际的类名全程为.placeholder-pink-400::placeholder表示文本占位符的颜色color: ...
Utilities for controlling the text color of an element. Class Properties Preview .text-transparentcolor: transparent;Aa .text-currentcolor: currentColor;Aa .text-blackcolor: #000;Aa .text-whitecolor: #fff;Aa .text-gray-100color: #f7fafc;Aa ...
<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="underline decoration-green-500">UlColor Green 500</p> 边框颜色:border border-[color]-[shade] border:添加边框 <input type="text" class="border" /> <input type="text" class="border border-red-500" /> <input type="text" class="border border-green-500" /> 间隔颜色:divide...
首先我们要做的第一件事情,是在官方文档中,找到background color对应的缩写是什么 然后在 extend 字段中,对应的字段里,配置自定义的语法,heise. 代码语言:javascript 复制 theme:{extend:{backgroundColor:{heise:{0:'rgba(0, 0, 0, 0)',1:'rgba(0, 0, 0, 0.1)',2:'rgba(0, 0, 0, 0.2)',3:...
-- 深色模式切换按钮 --><buttonid="theme-toggle"class="rounded-lg p-2.5 text-gray-500 hover:bg-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700"><!-- 亮色模式图标 --><svgclass="w-5 h-5 hidden ...
<input type="email" id="email" class="block w-full mt-1 text-sm bg-gray-50 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="example@example.com"> ...
npx tailwindcss build src/input.css -o dist/output.css 通过观察生成的CSS文件,你可以检查自定义的实用程序是否被正确地添加,以及它们是否按预期工作。 总结 通过安装和配置Tailwind CSS插件,你可以轻松地扩展框架的功能,使其更符合你的项目需求。记住,每个插件都有其特定的配置选项,所以一定要查阅插件的文档,了解...
npx tailwindcss init -i ./src/input.css -o ./dist/output.css --watch 这里,-i参数指定输入CSS文件,-o参数指定输出文件,--watch参数使Tailwind CSS在开发过程中持续监控文件变化。 方法二:直接下载 访问官方下载页面下载最新版本的Tailwind CSS。
Tailwind CSS 是什么？它在前端开发中有什么特点和优势？国内类似于 Tailwind CSS 的方案 Vant：Ant ...