中野's workspace

  • Profile
  • Privacy
  • Contact

2019/07/03

TailwindをReactで使ってみた

  • #React
  • #tailwindcss
  • #TypeScript
  • #JavaScript

目次

はじめに

reactにtailwind導入しました。

今回扱う内容は、環境構築時点~reactでtailwindが使えるようになるまでです。

(記事を書いてみて、reactでなくても試すことのできそうな内容に仕上がってることに気づきました…)

reactの環境構築は create-react-appを使いました。

バージョンは2.1.5です。

プロジェクトの作成

create-react-appでプロジェクトの作成を行います。

create-react-app <project name> --typescript

作成したプロジェクトに移動します。

cd <project name>

Tailwindとその他必要なものをインストール

yarn add -D tailwindcss postcss-cli autoprefixer

設定ファイルを作成

# filenameを省略するとtailwind.jsがデフォルトで作成されます。
yarn tailwind init <filename>

postcss.config.jsを作成

中身は以下のようにします。

gatsby-config.js
const tailwindcss = require('tailwindcss');

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

postcssでtailwindを変換するためのファイルを作成

postcssを使って、tailwindを有効なcssファイルにするためにstyle.cssを作成して、以下のように記載します。

ちなみにファイル名はお好みで。

style.css
@tailwind preflight;
@tailwind components;
@tailwind utilities;

ビルド設定

以下のスクリプトをpackage.jsonのscriptsに追記します。

スクリプト名はお好みで。

package.json
"watch:tailwind": "postcss ./src/styles.css -o ./src/tailwind.css -w",

このスクリプトを実行すると、tailwind.cssがsrc配下に出来上がっているはずです。

あとは読み込みたいファイルで読み込みを行ってあげればtailwindが利用できるようになっています。

import './tailwind.css';

まとめ

少し手順は複雑ですが、意外と簡単に出来ると思います。

冒頭でも述べた通り、react以外でも応用の効く内容だと思います。

tailwind使いやすいので、ぜひ使ってみてください!

参考

このエントリーをはてなブックマークに追加