もう生のCSSを書くのはやめようぜ。。。TailwindcssでCSS記述時間を圧倒的に減らす方法

いきなり質問して申し訳ないのですが、皆さんコードを書くのって好きですか？

プログラミングをやっている方々には愚問だと思います。

ただ、僕はコードを書くのがすごく嫌いです。

僕がいつも心掛けていることは、「コードを書く時間を出来るだけ減らしてエラー処理に時間をかける」です。

コードを書く時間よりもエラー処理にかける時間の方が圧倒的に多いですよね。

僕個人の価値観を押し付けてしまい申し訳ないのですが、それでもHTMLとCSSこの２つにかける時間はなるべく減らすのが妥当だと私は考えています。

そんな僕に打って付けなのがタイトルにも書いてある通りTailwindCSSです！

百聞は一見に如かずとも言うので、まずは以下の2つのコードを比べてみます。

taiwind.html

<div class="flex itmes-center justify-center"></div>

生.html

<div class="flex"></div>

<style>
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

お気づきの方も多いかもしれませんが、これら2つのコードは全く一緒です。

では、記述量が少ないのはどちらでしょう？

tailwind.htmlですよね。

このようにtailwindcssはクラスにそれぞれの用途に合わせたクラスを指定してあげることで圧倒的に記述量が減るわけです！

しかも、コードを見返す時にスタイルタグを見なくても、クラスを見てあげればどんなCSSが利いているのかが一目でわかります。

このように保守性の観点からも非常に良いと言っていいでしょう。

しかもドキュメントも非常に充実しているため、必要なものがあったら検索すればすぐに出てきます。

説明はこの辺にしておいて、ここからは実装していきます。

今回はVueで実装していきます。

他のフレームワークや言語を使用している方でもこちらの公式ドキュメントにパッケージのインストール方法が書いてありますのでぜひご覧ください。

それでは説明していきます！！

パッケージのインストール#

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

ファイルの設定#

無事インストールできたら次は必要なファイルの作成・設定を行っていきます。

まず、プロジェクト直下にpostcss.config.jsを作成してください。

以下をコピペ

postcss.config.js

const tailwindcss = require('tailwindcss');
const autoprefixer = require('autoprefixer')

module.exports = {
  plugins: [
    tailwindcss,
    autoprefixer,
  ]
}

次にassetsフォルダにtailwind.cssを作成し、以下をコピペ。

src\assets\tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

警告が表示されると思うのですがスルーでOKです！

そしたら、main.jsで今作成したファイルをインポートします。

src\main.js

import Vue from 'vue'
import App from './App.vue'
import './assets/tailwild.css'

// 以下省略

最後にtailwindcssの専用ファイルを以下のコマンドで作成します。

> npx tailwind init

npmではなくnpxです！

そしたら、tailwind.config.jsと言う名前のファイルが作成されます。

これはカスタマイズするためのjsファイルです。

何をカスタマイズするの？

とりあえず以下の例を見て下さい。

tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    extend: {},
  },
  variants: {
    textColor: ['responsive', 'hover', 'focus', 'group-hover'],
    extend: {},
  },
  plugins: [],
}

screensの中身を見てあげると見覚えのある数字がありますね。

今回は例でレスポンシブとしてこのように値を設定しています。

これを行うことでどうなるのか。

tailwind.html

<div class="md:flex"></div>

生.html

<div class="wrapper"></div>

<style>
@media (min-width: 768px) { 
  .wrapper{
    display: flex;
  }
}
</style>

またもや記述量が一気に減りましたね。

このようにしてtailwindcssを使うことができます！

これ以上話してもキリがないので、あとは他の方があげていらっしゃる記事を見るか公式ドキュメントを参照してください

いかがだったでしょうか？

クラス覚えるの大変と思うかもしれませんが、最初にCSS覚えた時よりも断然楽だと思いますよ！

偽りなく言うと、1週間もあれば慣れます。

結局CSSって大体displayとかwidthとかpaddingのように同じやつしか使わないので、それらを覚えちゃえば大丈夫です！！！

それでは引き続き勉強頑張りましょう！

以上、「もう生のCSSを書くのはやめようぜ。。。TailwindcssでCSS記述時間を圧倒的に減らす方法」でした！

Thank you for reading

参考記事#

・初めてのtailwindcss (Vue.js + PurgeCSS)
・TailwindCSS入門 ~ Utility First + デザインシステムの構築 ~