Zenn
🛠️

2020/11版：TailwindCSS + PostCSS の開発環境を yarn で構築する

2020/11/15に公開
yarn
Tailwind CSS
PostCSS
tech

今回は開発環境ということで cssnano を使った minify などは行わないところまでとします。
また、 git や npm のローカルの準備は既に終わってるものとします。

TL;DR

TailwindCSS 的にはCSSプリプロセッサは非推奨っぽい

ほんとは前回記事「2020/11版：SCSS の開発環境を yarn run で構築する」で
一緒にやりたかったんですが、 TailwindCSS のサイトを見てたら
TailwindCSS 的にはCSSプリプロセッサ(トランスパイラ)は非推奨のようです。

  • Using with Preprocessors | TailwindCSS
    • https://tailwindcss.com/docs/using-with-preprocessors
    • "It's important to note that you don't need to use a preprocessor with Tailwind"
      • 「Tailwindでプリプロセッサを使用する必要がないことに注意することが重要です。」
    • "you typically write very little CSS on a Tailwind project anyways so using a preprocessor just isn't as beneficial as it would be in a project where you write a lot of custom CSS."
      • 「通常、TailwindプロジェクトではCSSをほとんど記述しないため、プリプロセッサを使用することは、カスタムCSSを大量に記述するプロジェクトの場合ほど有益ではありません。」

まぁ確かに言われてみればそうかも……。 ←影響されやすい

私はなんでSass(SCSS)を使いたかったんだっけ？

Sass(SCSS) は強力で、様々な機能が用意されています。

  • Variables：変数
  • Nesting：ネスト記述
  • Partials：部分ファイルの作成
  • Modules：variables, mixins, and functions を利用したモジュール化
  • Extend/Inheritance：拡張/継承
  • Operators：演算

などなど。

私も以前はフルスクラッチでSCSSを書いていたので色々とお世話になったのですが、
CSSフレームワークを使うなら確かにゴリゴリ書かないですね……。
TailwindCSS には @apply もあるし。
ネスト記述や変数、制御構文などについては必要になり次第、
順次 PostCSS plugin を入れていけば、やれそうです。
ということで今回はSass(SCSS)は使わずこの方針で行くことにしました。
（なので前回の記事とは分けました）

yarn を初期化して必要なパッケージを入れる

だいたいこんな感じですね。
npx foobar は yarn run foobar でもイケます。

mkdir -p public/css
mkdir -p src/css
yarn init -y
yarn add tailwindcss
yarn run tailwindcss init -p
yarn add postcss postcss-cli postcss-import postcss-nested --dev

postcss は tailwindcss に入ってるから本当は不要っぽいんですが
Error: PostCSS plugin postcss-nested requires PostCSS 8. というようなエラーが出て直近（2020/11/14時点）ではそのままでは実行できませんでした。
これ関連っぽい？

postcss.config.js に plugins を書く

postcss.config.js はこんな感じに。
Source Map も出るようにしておきましょう。
（本番環境用に 出力を切り分けるのはまた別の機会にやります）

module.exports = (ctx) => ({
  map: ctx.options.map,
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('postcss-nested'),
    require('autoprefixer'),
  ],
})

試しにコンソールからビルドしてみる

yarn postcss src/**/*.css -d public/css

うん！ いい感じ!

tailwindcss を使えるようにする

ゆくゆくは tailwindcss で定義されてる物から必要な物だけを
自前のところに @apply するようにするにしても、
tailwindcss で定義されてるclassを使い続けるにしても、
最初は全部入りセットも欲しいですね。なのでこんな感じのものを一つ用意しておきます

src/css/tailwindcss.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

あとはテスト用のcssとhtmlを用意してみましょう。
src/css/global.css

body {
  margin: 0;

  p {
  margin: 0;
  }
}

.btn {
  @apply font-bold py-2 px-4 rounded bg-gray-600 w-32;
}

public/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>index</title>
    <link href="./css/global.css" rel="stylesheet" type="text/css">
    <link href="./css/tailwindcss.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <h1>foobar</h1>
    <p class="text-purple-600">baz<p>
    <div class="btn">btn</div>
  </body>
</html>

package.json に scripts を書く

こんな感じですね。

  "scripts": {
    "css": "yarn postcss src/**/*.css -d public/css"
  },

出来上がった package.json はこんな感じ

{
  "name": "my_project",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "git@github.com:<userid>/my_project.git",
  "author": "your name",
  "license": "MIT",
  "scripts": {
    "css": "yarn postcss src/**/*.css -d public/css"
  },
  "dependencies": {
    "tailwindcss": "^1.9.6"
  },
  "devDependencies": {
    "postcss": "^8.1.7",
    "postcss-cli": "^8.2.0",
    "postcss-import": "^13.0.0",
    "postcss-nested": "^5.0.1"
  }
}

あれ？ tailwindcss も devDependencies でいい気がしてきたな……

参考

yarn run する

yarn run hoge の場合 run は省略できます。

yarn css

はい、できました。やったぜ。
今回のプロジェクトファイル一式はこちらです。
https://github.com/JUNKI555/yarn_run_practice02

そのほかの参考サイト

Discussion