Tailwind.cssをReactの環境にインストール[Ivory開発日誌2日目]

作成日: 2020/05/31(日)

更新日: 2020/05/31(日)

ハローワールド。

最近Rustをやったり、ブログのソースを魔改造しまくったり、新しいゲームを2本も買ってしまったりと何かとIvoryプロジェクトが開始早々頓挫していますが2日目です。

1日目ではプロジェクトを開始しました。

本日はCSSフレームワークの設定をします。
ReactにはVuetify程（僕に）刺さるUIコンポーネントフレームワークがないので、正直利用するたびに変わります。

なので、今回はtailwind.cssを利用しようと思います。

Tailwind CSS

tailwind.cssのコアコンピタンスにはUtilify Firstといったものがあります。

少し話はそれますが、tailwind.cssの作者はCSSユーティリティクラスと「関心の分離」（リンク先記事は日本語訳記事）というタイトルでCSSとHTMLの分離についての考え方を述べています。
HTML5になり、よりセマンティックなマークアップとCSSによるデザインを分けるためには、という「関心の分離」について議論が重ねられている分野においての1つの回答ですが、非常にタメになる考え方でした。

私もBEMなどよりはこちらのほうが好きなので非常に興味がそそられたのと、UIフレームワークに頼らないデザインを作成したいという感情が現れたので今回はtailwind.cssを採用することになりました。

Tailwind CSSのインストール

インストールを参照にインストールしていきます。

$ yarn add -D tailwindcss postcss-cli autoprefixer css-loader style-loader postcss-loader
$ yarn tailwind init

まずpostcss.config.jsを作成して設定するだけします。

postcss.config.js

module.exports = {
  plugins: [require('tailwindcss'), require('autoprefixer')],
};

次にwebpackの設定をします。Electronの場合はwebpack.renderer.ts(rendererの方のwebpack.config.ts)に設定をします。

webpack.renderer.ts

module: {
  rules:[
    // ...
    {
      test: /\.s?css$/,
      use: [
       'style-loader',
       { loader: 'css-loader', options: { importLoaders: 1 } },
       'postcss-loader',
      ],
    },
    // ...
  ]
}

次にtailwind.cssを作成します。これに関してはどこに作ってもいいですが、今回はsrc/style/tailwind.cssを作成しました。

src/style/tailwind.css

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

最後にrenderer.tsx（redererのentryファイル）を下記のようにします^[1]。

renderer.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import '@/style/tailwind.css';

const app = document.getElementById('app');

ReactDOM.render(<p className="text-6xl">Hello, World!</p>, app);

後はビルドして開くだけ。

big size hello world

text-6xlクラスはtailwind.cssのクラスの1つで、文字の大きさをすげぇでかくしてくれます。tailwind.cssがインストールできましたね。

短いですが、本日はここまで。次はReactよくばりセット、Storybookとテストフレームワーク（jestの予定）のセットアップを行う予定です。

import '@/style/tailwind.css';となっていますが、これはwebpackのresolve機能を利用しています。create-react-appとかだと利用できないみたいですが、設定自体は簡単なのでやってみてください。 ↩︎