railsでTailwind CSSを使用するまでの手順

railsでcssのフレームワークである「Tailwind CSS」を使用するまでの手順を記述してます。Webpackerを使用してます。
環境
- OS windows10 pro 64bit
- ruby 2.6.6
- rails 6.0.3.2
※windows10にrubyをインストールして実行する手順はこちら
※windows10にRuby on Railsをインストールして利用する手順はこちら
Tailwind CSSインストール
yarnを利用してインストールします。
※windows10にscoopを使ってnode.jsをインストールする手順はこちら
nodeがインストールされていればyarnは、下記を実行すればインストールされます。
1 |
npm install -g yarn |
railsプロジェクトを作成します。
1 |
rails new rails-test |
対象のrailsのプロジェクト直下で下記のコマンドを実行します。
1 2 |
cd rails-test yarn add Tailwind CSS |
自分の場合は作成したプロジェクト名が「rails-test」 なのでrail-testファルダ配下で実行してます。
プロジェクト配下にあるpackage.jsonにTailwind CSSが追加されていることが確認できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
{ "name": "rails-test", "private": true, "dependencies": { "@rails/actioncable": "^6.0.0", "@rails/activestorage": "^6.0.0", "@rails/ujs": "^6.0.0", "@rails/webpacker": "4.2.2", "tailwindcss": "^1.5.2", "turbolinks": "^5.2.0" }, "version": "0.1.0", "devDependencies": { "webpack-dev-server": "^3.11.0" } } |
Tailwind CSS設定
「app\javascript」ファルダ内にある「css」という名前でフォルダを作成します。

作成した「css」フォルダ内に「application.css」を作成して、以下の通りに編集します。
1 2 3 |
@import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities"; |
Tailwindのconfigファイルを作成します。
1 |
yarn tailwind init app/javascript/css/tailwind.js |
次に、「app\javascript\packs」にあるwebpackのデフォルトのエントリーポイント「application.js」に下記を追加します。
1 |
import '../css/application.css' |
最後にプロジェクト配下にあるpostcssの設定ファイルである「postcss.config.js」に以下を追記します。
1 2 |
require('tailwindcss')('./app/javascript/css/tailwind.js'), require('autoprefixer'), |
編集後の「postcss.config.js」は下記の通りとなります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
module.exports = { plugins: [ require('postcss-import'), require('postcss-flexbugs-fixes'), require('tailwindcss')('./app/javascript/css/tailwind.js'), require('autoprefixer'), require('postcss-preset-env')({ autoprefixer: { flexbox: 'no-2009' }, stage: 3 }) ] } |
Tailwind CSS使い方
Tailwind CSSを適当なテンプレートに、適応してみます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6"> <div class="flex items-center flex-shrink-0 text-white mr-6"> <svg class="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"/></svg> <span class="font-semibold text-xl tracking-tight">Tailwind CSS</span> </div> <div class="block lg:hidden"> <button class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white"> <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg> </button> </div> <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto"> <div class="text-sm lg:flex-grow"> <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4"> Docs </a> <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4"> Examples </a> <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white"> Blog </a> </div> <div> <a href="#" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">Download</a> </div> </div> </nav> |
Tailwind CSSが使用できていることが確認できます。

-
前の記事
javascript 自然対数の底 であるe(ネイピア数)の累乗を計算する 2020.08.18
-
次の記事
javascript URLのアンカーを取得する 2020.08.18
コメントを書く