【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>