TailwindCSS 从零开始 - 价目表卡片实战 - 首页标题样式

title

前面讲了这麽多简单的观念与使用方法，接下来的九篇都会是搭配 JIT 模式的实作练习，就来做一个简易的价目表卡片吧！

建立专案架构

设定 body 背景色，使用自定义的方式来写，bg-[#colorCode]。
在 body 的下层使用一个区块元素定义整个标题的架构。
使用 flex 属性包住标题与按钮，使其横向并排，用 justify-between 与 item-start 属性使其两个元素向上又左右对齐。
在 1280px 以上萤幕使用最大宽度为 1280px，原因是人眼的角度为 120 度，若页面太宽，是不好浏览的。
并且 h1 的样式给了一个 letter spacing 的属性，让标题文字宽度可以变宽，显得更显眼也好比较好阅读。

<body class=" bg-[#eee]">
    <div class="p-4 h-screen lg:p-8">
        <div
            class="flex justify-between items-start lg:max-w-[1280px] lg:mx-auto">
            <h1 class="text-gray-800 text-4xl tracking-wide">this is title</h1>
            <button>login</button>
        </div>
    </div>
</body>

这时就会得到以下结果，

有发现到 button 在 TailwindCSS 样式跟传统 CSS 的样式不太一样，是没有预设样式的。

按钮样式

前面有提到 JIT 模式的好处，不需要看额外配置档的预设样式有哪些伪类或伪元素没有新增，而是直接加上去就可以了。

除了最简单的背景基本样式以及 active 样式外，这边比较特别的是有加上一个 duration 的样式，如果没有 JIT 的话，前面要加上 transition 这个属性，才会知道要用此样式，但在 JIT 模式後，就会知道要使用 transition 这个效果，不需要另外写。

<button id="login"  class=" bg-purple-500 text-white py-2 px-4 rounded-md hover:bg-purple-600 tracking-wide active:bg-purple-900 active:ring-2 duration-200">login</button>

button