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

2020.08.18
rails Tailwind
Tailwind

railsでcssのフレームワークである「Tailwind CSS」を使用するまでの手順を記述してます。Webpackerを使用してます。

1. 環境
2. Tailwind CSSインストール
3. Tailwind CSS設定
4. Tailwind CSS使い方

環境

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は、下記を実行すればインストールされます。

npm install -g yarn

1	npm install -g yarn

railsプロジェクトを作成します。

rails new rails-test

1	rails new rails-test

対象のrailsのプロジェクト直下で下記のコマンドを実行します。

cd rails-test
yarn add Tailwind CSS

1 2	cd rails-test yarn add Tailwind CSS

自分の場合は作成したプロジェクト名が「rails-test」なのでrail-testファルダ配下で実行してます。

プロジェクト配下にあるpackage.jsonにTailwind CSSが追加されていることが確認できます。

{
  "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"
  }
}

{

"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」を作成して、以下の通りに編集します。

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

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

Tailwindのconfigファイルを作成します。

yarn tailwind init app/javascript/css/tailwind.js

1	yarn tailwind init app/javascript/css/tailwind.js

次に、「app\javascript\packs」にあるwebpackのデフォルトのエントリーポイント「application.js」に下記を追加します。

import '../css/application.css'

1	import '../css/application.css'

最後にプロジェクト配下にあるpostcssの設定ファイルである「postcss.config.js」に以下を追記します。

require('tailwindcss')('./app/javascript/css/tailwind.js'),
require('autoprefixer'),

1 2	require('tailwindcss')('./app/javascript/css/tailwind.js'), require('autoprefixer'),

編集後の「postcss.config.js」は下記の通りとなります。

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
    })
  ]
}

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を適当なテンプレートに、適応してみます。

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

<span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>

</div>

</button>

</div>

Docs

</a>

Examples

</a>

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>

</nav>

Tailwind CSSが使用できていることが確認できます。