【Rails6 Tailwind】21年3月時点でのRails6へのTailwindの導入

環境

rails: 6.0.3.6
webpacker: 4.3.0
@tailwindcss/postcss7-compat": "^2.0.4"
autoprefixer": "^9.8.6"
postcss": "^7.0.35"
tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.4"

postcss7との互換性を持つTailwindをインストールする

現時点ではまだpostcss8は不安定でした🙇‍♂️
めちゃめちゃエラー出ました

terminal

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

tailwindのconfigファイルの生成

terminal

>npx tailwindcss init
or
>yarn tailwindcss init

postcssのconfigファイルの設定

これにより、CSSに手を加えるためのフレームワークであるPostCSSの、手を加える対象にtailwindを適用します。

postcss.config.js

module.exports = {
  plugins: [
    // ここから
    require('tailwindcss'),
    require('autoprefixer'),
    // ここまで追記
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

tailwindのCSSの記述

javascriptフォルダ以下に適当にTailwind用のCSSを作成ください。

app/javascript/css/tailwind.css

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

tailwindのCSSの読み込み

app/javascript/packs/application.js

require("@rails/activestorage").start()
require("channels")

// 以下を追記　ファイルやPathは皆様の環境に適応させてください🙇‍♂️
import '../css/tailwind.css';

以上です！

テスト用

Tailwind公式ページから拝借しましたのでテスト用に試してみてください👍

index.html.erb

<section class="px-4 sm:px-6 lg:px-4 xl:px-6 pt-4 pb-4 sm:pb-6 lg:pb-4 xl:pb-6 space-y-4">
  <header class="flex items-center justify-between">
    <h2 class="text-lg leading-6 font-medium text-black">Projects</h2>
    <button class="hover:bg-light-blue-200 hover:text-light-blue-800 group flex items-center rounded-md bg-light-blue-100 text-light-blue-600 text-sm font-medium px-4 py-2">
      <svg class="group-hover:text-light-blue-600 text-light-blue-500 mr-2" width="12" height="20" fill="currentColor">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M6 5a1 1 0 011 1v3h3a1 1 0 110 2H7v3a1 1 0 11-2 0v-3H2a1 1 0 110-2h3V6a1 1 0 011-1z"/>
      </svg>
      New
    </button>
  </header>
  <form class="relative">
    <svg width="20" height="20" fill="currentColor" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" />
    </svg>
    <input class="focus:border-light-blue-500 focus:ring-1 focus:ring-light-blue-500 focus:outline-none w-full text-sm text-black placeholder-gray-500 border border-gray-200 rounded-md py-2 pl-10" type="text" aria-label="Filter projects" placeholder="Filter projects" />
  </form>
  <ul class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2 gap-4">
    <li x-for="item in items">
      <a :href="item.url" class="hover:bg-light-blue-500 hover:border-transparent hover:shadow-lg group block rounded-lg p-4 border border-gray-200">
        <dl class="grid sm:block lg:grid xl:block grid-cols-2 grid-rows-2 items-center">
          <div>
            <dt class="sr-only">Title</dt>
            <dd class="group-hover:text-white leading-6 font-medium text-black">
              {item.title}
            </dd>
          </div>
          <div>
            <dt class="sr-only">Category</dt>
            <dd class="group-hover:text-light-blue-200 text-sm font-medium sm:mb-4 lg:mb-0 xl:mb-4">
              {item.category}
            </dd>
          </div>
          <div class="col-start-2 row-start-1 row-end-3">
            <dt class="sr-only">Users</dt>
            <dd class="flex justify-end sm:justify-start lg:justify-end xl:justify-start -space-x-2">
              <img x-for="user in item.users" :src="user.avatar" :alt="user.name" width="48" height="48" class="w-7 h-7 rounded-full bg-gray-100 border-2 border-white" />
            </dd>
          </div>
        </dl>
      </a>
    </li>
    <li class="hover:shadow-lg flex rounded-lg">
      <a href="/new" class="hover:border-transparent hover:shadow-xs w-full flex items-center justify-center rounded-lg border-2 border-dashed border-gray-200 text-sm font-medium py-4">
        New Project
      </a>
    </li>
  </ul>
</section>

何かあればご指摘ください🙇‍♂️
Twitter
Github