tailwindcss 使用してわかったこと　(tailwindcss + stylus)

# 結論
tailwindcss + stylusしんどい。

以下リストに当てはまる方にみていただきたいです。

- tailwindcssとsassやらstylusなにを組み合わせようか悩んでいる方
- tailwindcss + stylusを使っているけどなんか詰んだ方



使用環境
Vue CLI 4.5.11
tailwindcss 2.0.2
## なにがきつかったか
実際に使ってみて、きつかった点をアウトプットしてみました。

### 1.stylusじゃない（え？）
stylusの利点といえば、`:(コロン)` ` ;(セミコロン)` `{}`が不要なので記述が楽という点ですよね。

```css:example.css
//cssパターン
.example {
  width: 50%;
  height: 50%; 
}

```

```css:example.styl
//stylusパターン
.example
  width 50%
  height 50%
```
上記コードは一緒 exampleクラスに対して`横幅50%` `縦50%`を指定しています。

tailwindcssをstylusと組み合わせて書くと以下のようになります。

```vue:Example.vue

<style lang="stylus">
@css {
  .example {
    @apply w-1/2 h-1/2;
  }
}
</style>
```

stylusを用いてtailwindcssの`utility class`をセットする際は`@css`というものを定義して、その下にスタイルを設定していきます。
`{}`がないとダメです。見た目は完全にstylusではないですね。

#### 2.`@css`を回避できない
実は`@css`を使わず記述が通るパターンがあります。

```vue:Example.vue

<style lang="stylus">
.example @apply w-1/2 h-1/2;
</style>
```

お！いけるやん！なるのですが使えないパターンがあります

```vue:Example.vue

<style lang="stylus">
.example @apply w-1/2 h-1/2 focus:w-1/4;
</style>
```
focusは使用できません。

```vue:Example.vue

<style lang="stylus">
@css {
  .example {
    @apply w-1/2 h-1/2 focus:w-1/4;
  }
}
</style>
```
@cssをつけないと

#### 3.メディアクエリ

tailwindcssにおけるメディアクエリの指定の仕方は３パターンほどあると思います。
その中でstylusとうまくやっていける方法をみていきます。

##### 1.`@screen`

- ダメなパターン

`@screen`はネストさせることができない。。

```vue:Example.vue

<style lang="stylus">
@css{
  .example {
    @apply w-1/2 h-1/2;
    @screen sm {
      @apply w-1;
    }
  }
}
</style>

```
`@screen`を使うのであれば以下のようにするといけます。

```vue:Example.vue

<style lang="stylus">
@css {
  .example {
    @apply w-1/2 h-1/2;
  }
  @screen sm {
    .example {
      @apply w-1;
    }
  }
}
</style>

```

##### 2.`@media`
`@media`はネストの場合も使用することができます。

- ネスト

```vue:Example.vue

<style lang="stylus">
@css {
  .example {
    @apply w-1/2 h-1/2;
  }
  @media (min-width: theme('screens.sm')) {
    .example {
      @apply w-1;
    }
  }
}
</style>
```
- ネストなし

```vue:Example.vue

<style lang="stylus">
@css {
  .example {
    @apply w-1/2 h-1/2;
  }
  @media (min-width: theme('screens.sm')) {
    .example {
      @apply w-1;
    }
  }
}
</style>

```

冗長感が否めないですね。

##### Breakpoint prefix
`utility class`に対してBreakpoint prefixをしようすると指定したBreakpointでスタイルを適用させることができます。

```vue:Example.vue

<style lang="stylus">
@css {
  .example {
    @apply w-1/2 h-1/2 sm:w-1;
  }
}
</style>

```

`sm:`というものがBreakpoint prefixにあたります。
いまは同列で扱っているのですが以下のようにもできます。

```vue:Example.vue

<style lang="stylus">
@css {
  .example {
    @apply w-1/2 h-1/2;
    @apply sm:w-1;
  }
}
</style>

```

わざわざ二列にする必要なくね？？ってなると思いますが、例えば以下のようなパターンだとメリットを感じれると思います。

```vue:Example.vue
<style lang="stylus">
@css {
  .example {
    @apply pt-0 pr-0 pl-0 pb-0 rounded-full focus:outline-none focus:ring-2 focus:bg-green-primary sm:mr-0 sm:ml-auto sm:rounded sm:sticky sm:row-start-1 sm:col-start-4 sm:col-end-5 sm:max-w-13 sm:w-full;
  }
}
</style>
```

上記コードだと長くて追うのがきついです。。
なので以下のように2行にすると多少はすっきりしますよね


```vue:Example.vue
<style lang="stylus">
@css {
  .example {
    @apply pt-0 pr-0 pl-0 pb-0 rounded-full focus:outline-none focus:ring-2 focus:bg-green-primary;
    @apply sm:mr-0 sm:ml-auto sm:rounded sm:sticky sm:row-start-1 sm:col-start-4 sm:col-end-5 sm:max-w-13 sm:w-full;
  }
}
</style>
```

メディアクエリを使用するならBreakpoint prefixが一番良さそうな気がしてきます。


## おわりに
以上がtailwindとstylusを組み合わせて使うのしんどい話でした。
まだ使ってみてそんなに時間が経っているわけではないのでなにか他にstylusメリットデメリットがあればコメントしていただけますと幸いです！