Rails 6、TailWindCSS、Tailwindui、および刺激新しいアプリガイド(2020年11月)

7637 ワード
rails making postcss tailwindcss テキストリンク

更新
  • 2020年11月29日(日)TailWindCSS 2に更新.XのPostCSS 7互換性.

    • あなたの新しいレール
    新しいレール6から始めるXアプリは、最新のTailWindCSS、WebPack、およびあなたのベース開発スタックとしての刺激をしたいですか?
    それ以上見て!この記事はあなたが必要とするすべてです.
    私はいくつかの互換性の問題が解決されるように、次の数週間のコースでそれを更新し続けるつもりです.
    インストールとジェネレータコマンドは以下に含まれます.だけでなく、風の設定ファイルを追加したり、レールの具体的に変更する必要があります.私は、どんな上流のドキュメンテーションへの言及も含みました.
    始めましょう.

    Rails 6のインストールX
    最新のRailsのリリースを書く時は6.0.3.4で、最新のrcは6.1.0です.RC 1
    ローカルRails Gemをインストールまたは更新します.
    $ gem install rails

    ウェブパック、刺激、およびPostgreSQLでRailsアプリを生成する
    以下にRailsアプリジェネレータコマンドを使用します.
    $ rails new mynewapp --database=postgresql --webpack=stimulus
$ cd mynewapp

    糸は、Postcss互換性でTailWindCSSを加えます
    最初に、あなたのRailsアプリに糸を介してTailWindCSSを追加します.インストールしますTailwindCSS as a PostCSS Plugin それはあなたが柵のJavaScriptライブラリをする方法です.
    また、インストールが必要ですa TailwindCSS compatibility build これはPostCSS 7で動作します.Railsはまだ必要なPostcss 8にはありません.
    次のコマンドを実行し、インストールするバージョンとして2.0.1 - compatを選択します.
    $ yarn add tailwindcss@comp
yarn add v1.22.4
info No lockfile found.
[1/4] 🔍 Resolving packages...
Couldn't find any versions for "tailwindcss" that matches "comp"
? Please choose a version of "tailwindcss" from this list: 
  2.0.1 
❯ 2.0.1-compat 
  2.0.0 
  2.0.0-compat

    RealWindCSSをPostcssに加える
    生成されたPostcssを編集します.設定.あなたの柵アプリとadd the tailwindcss and autoprefixer requires. TailWindCSSに設定パラメータを追加して、設定ファイルを探すためにTailWindCSSに指示する必要があります.
    module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss')('./app/javascript/tailwind.config.js'),
    require('autoprefixer'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}
    Postcss.設定.js

    TexWindCSS設定ファイルをフォントとフォームで作成します
    尾風を作る.設定.アプリケーション/JavaScriptのJSの設定ファイルは、フォント間で使用するように設定as recommended in the Tailwind UI documentation . @ tailwindcss/フォームにも追加しました.
    const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  variants: {},
  plugins: [
    require('@tailwindcss/forms'),
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  }
}
    アプリ/JavaScript/風車.設定.js

    糸でTailWindCSSフォームプラグインを加えてください
    この段階で、TruwindCSS/Formsプラグインをアプリケーションに追加しない限り、bin/webpack devサーバーは起動しません.
    $ yarn add @tailwindcss/forms

    あなたのJavaScriptパックにTailWindCSS輸入を加えてください
    この記事では、1つのパックにアプリのJavaScriptとCSSを結合するセットアップを使用します.だから我々will include the TailwindCSS import directive directly トップレベルのアプリ/パック/アプリケーションに.jsファイル
    // This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

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

// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

import "controllers"

import "tailwindcss/tailwind.css"
    アプリケーション/JavaScript/パック/アプリケーション.js

    アプリケーションのレイアウトのCSSを更新します
    アプリケーションでStyleSheetHound LinkLungタグをStylesheetHand PackResタグに変更します.HTML .あなたのCSSがロードされることを確認するerb.
    <!DOCTYPE html>
<html>
  <head>
    <title>Mynewapp</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>
    アプリケーション/ビュー/レイアウト/アプリケーション.HTML .ERB

    初期データベースの作成と移行
    この記事の開始時に生成されたアプリケーションはPostgreSQLデータベースを使用します.最初のデータベースの作成と移行を開始します.
    $ bin/rails db:create
$ bin/rails db:migrate
    それだ!あなたがこの記事を使用したならば、確かに私に知らせてください.そして、あなたがどんなトラブルも経験しているならば、私はその時トラブルシューティング部を加えることができます.
    あなたは、またはMeloel [ at ]ヘイ[ dot ] comで電子メールを介してすることができます.
    次の方でお会いしましょう.
    -ミシェル
    [Spring]IoCとDI(2)
    白駿(8958)[1次元アレイ]