---
# System prepended metadata

title: tailwind使用
tags: [CSS/HTML 相關]

---

---
title:  tailwind使用
tags: CSS/HTML 相關
---

## <font color=red>**tailwind使用** </font>

![心智圖](https://i.imgur.com/ZqT0xdf.jpg)

## 使用@apply建立自訂義class

專案下到app/javascript/styles 裡面建立各種用途的scss檔案，如form.scss、button.scss

在各種用途的scss檔案裡面填寫類似下面的程式碼的格式
```css=
form {
  .input {
    @apply border px-2 py-1 text-lg rounded outline-none;
  }

  .action-btn {
    @apply px-2 py-1 rounded;
  }
}
```
/app/javascript/styles 的 applicaiton.scss 裡面寫上後，畫面就能套用自訂義的class
```css=
/* 把相關的檔填寫如下導入到 applicaiton.scss */
@import "./form";
```

在使用jit模式下，如果專案內有出現未編譯過的class，他會暫時沒有效果，需要重開foreman才能渲染。

小於640的時候使用這個CSS sm:大於640以上的時候使用這個CSS由小寫到大