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

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


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

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

在各種用途的scss檔案裡面填寫類似下面的程式碼的格式

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

/* 把相關的檔填寫如下導入到 applicaiton.scss */
@import "./form";

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

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