2019/07/03
TailwindをReactで使ってみた
目次
はじめに
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使いやすいので、ぜひ使ってみてください!