Rails6에서 Tailwind CSS를 사용해 보십시오.

Rails 프로젝트를 작성합니다.

$ rails new appname -d postgresql

Gemfile에 Tailwind CSS를 추가합니다.
Gemfile

gem 'tailwindcss-rails'

설치하다.

$ bin/bundle install
$ bin/rails tailwindcss:install

필요한 파일을 만듭니다.
이미 존재하는 것을 소홀히 하다.

$ mkdir app/javascript/css
$ vim app/javascript/css/tailwindcss.css
$ vim app/javascript/packs/application.js
$ vim app/views/layouts/application.html.erb
$ vim postcss.config.js

app/javascript/css/tailwindcss.css

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

app/javascript/packs/application.js

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

import "../css/tailwindcss.css";

// 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 "stylesheets/application"

다음과 같은 내용을 보충해야 한다.
app/views/customer/layouts/application.html.erb

<%= stylesheet_pack_tag "application", "data-turbo-track": "reload" %>

module.exports = {
  plugins: [
    require('tailwindcss')("./app/javascript/stylesheets/tailwind.config.js"),
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

화면은 다음과 같다.
적당한 견해.html.erb

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="h-48 w-full object-cover md:w-48" src="https://placehold.jp/500x500.png" alt="Man looking at item at a store">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Finding customers for your new business</a>
      <p class="mt-2 text-gray-500">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
    </div>
  </div>
</div>

브라우저에 표시된 화면입니다.

미혹이 많았지만 다음 두 문장을 참고하면 간단한 절차가 순조롭게 진행될 수 있다.

Rails6의 초기 설정~PostgreSQL,Tailwind CSS~

Rails에서 TailwindCSS 가져오기

다음은 실패 사례다.
실패 도형으로 미리 남겨둔 다양한 시도를 검색하는 사람도 있을 것 같다.

불순한 버전 (실패 모드)

검색을 많이 했는데 "패러디도 잘 안되는데..."이 때문에 괴로워하는 사람도 있을 것 같다.
여기서부터는 3시간 동안 버티다가 제대로 진행되지 못한 시행착오의 기록이다.
같은 실수를 한 사람은 이 문장의 절차를 시험해 보세요.
Rails 프로젝트는 제작 상태에서 시작합니다.
TailwindCSS를 설치합니다.

yarn add tailwindcss postcss autoprefixer

다음 오류가 발생했을 때n 패키지 및 노드를 설치합니다.js를 업데이트합니다.

error [email protected]: The engine "node" is incompatible with this module. Expected version ">=12.13.0". Got "10.24.0"
error Found incompatible module.

다음은 Docker 컨테이너 내 작업입니다.

# yarn add  n --ignore-engines
# node_modules/n/bin/n stable
# apt purge -y nodejs npm
# exec #SHELL -l
# node -v
v14.16.1

Tailwind CSS를 초기화합니다.

# npx tailwindcss init

app/javascript/stylesheets/application.scss에 다음 코드를 추가합니다.
app/javascript/stylesheets/application.scss

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

app/javascript/packs/application.js에 다음 코드를 추가합니다.
app/javascript/packs/application.js

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

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

require("stylesheets/application.scss")

app/views/layouts/application.html.erb 다음과 같이 편집합니다.
app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Inter&display=swap" rel="stylesheet">
    <title>Rokuro</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

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

  <body>
    <%= yield %>
  </body>
</html>

루트 디렉토리의 postcss.config.js를 다음과 같이 편집합니다.
postcss.config.js

module.exports = {
  plugins: [
    // if you are using non default config filename
    require("tailwindcss")("tailwind.config.js"),
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

필요한 모듈을 설치합니다.

# npm install

설치가 완료되었으니 실제 반영 여부를 확인하십시오.config/application.rb에서 다음과 같은 내용을 보충한다.
config/application.rb

config.generators.assets = false
config.generators.helper = false

홈페이지를 만들다.

bin/rails g controller home index

루트를 제거하는 경로를 정의합니다.
routes.rb

Rails.application.routes.draw do
  get 'home/index'
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
  root 'home#index'
end

app/views/home/index.html.erb

<h1>This is static#index</h1>
<div class="bg-red-500 w-3/4 mx-auto p-4">
  <p class="text-white text-2xl">Test test test</p>
</div>

웹 패키지로 컴파일해 보세요.

# bin/webpack-dev-server

Rails 서버를 시작합니다.

# bin/rails s -b 0.0.0.0

오류 대응

다음 오류가 발생하면 Webpacker를 다시 설치해야 합니다.

ERROR in ./app/javascript/stylesheets/application.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/dist/cjs.js??ref--7-3!./app/javascript/stylesheets/application.scss)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
    at Processor.normalize (/apps/rokuro/node_modules/postcss/lib/processor.js:153:15)
    at new Processor (/apps/rokuro/node_modules/postcss/lib/processor.js:56:25)
    at postcss (/apps/rokuro/node_modules/postcss/lib/postcss.js:55:10)
    at /apps/rokuro/node_modules/postcss-loader/src/index.js:140:12
ℹ ｢wdm｣: Failed to compile.

다음 명령을 사용하여 웹 패키지를 다시 불러옵니다.

# yarn remove @rails/webpacker
# yarn add rails/webpacker
# yarn upgrade

rails/webpacker
그런 다음 Gemfile의 웹 패키지 설정을 변경합니다.
Gemfile

# gem 'webpacker', '~> 4.0'
gem "webpacker", github: "rails/webpacker"

다음 명령을 실행합니다.

# bundle install
# bundle update webpacker
# rails webpacker:install
# ./bin/webpack

다음 오류가 발생하면 package.json에서 browserslist 또는 루트 디렉터리에서 .browserslistrc를 삭제합니다.

[webpack-cli] Error [BrowserslistError]: /apps/rokuro contains both .browserslistrc and package.json with browsers

이외에 다음 오류가 발생하면 웹 패키지를 다시 컴파일합니다.

ActionView::Template::Error (Webpacker can't find application.css in /apps/rokuro/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.

# rm -rf bin/webpack*
# rails webpacker:install
# bin/webpack-dev-server

등 검색하면 해결책이 나오지만 어느 것도 순조롭지 않다.
이 페이지의 첫머리로 돌아가서 다시 절차를 밟아서 마침내 잘 진행되었다.

Reference

이 문제에 관하여(Rails6에서 Tailwind CSS를 사용해 보십시오.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/fjsh/articles/2055416ca30cc4

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

파이썬을 이용한 머신러닝, 딥러닝 실전 개발 입문 (1)

프록시 환경에서 Ubuntu Server 20.04에 MariaDB를 추가할 때 막히면

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다