Ruby on Rails 6 및 TailwindCSS 1.1.4 설정 방법
지도의
이 강좌에서는 Ruby 및 Rails gem을 설치했다고 가정합니다.없으면 Getting Started with Rails Guide 를 방문하십시오.
나는 또한 this repo 에서 코드를 만들 것이다.당신이 곤경에 빠지거나 환매 협의가 깨질 때 미해결 문제가 발생하지 않도록 환매 협의를 일종의 자원으로 도와주십시오!!
이 프레젠테이션은 다음과 같이 작성되었습니다.
새 Rails 프로젝트 만들기
rails new tailwind_css_rails_demo -d postgresql
cd tailwind_css_rails_demo
rails db:create
-d postgresql 플래그를 생략할 수 있습니다.Rails 및 웹 패키지 실행
나는 한 명령줄 옵션 카드에서 Rails 서버를 실행하고 다른 명령줄 옵션 카드에서 웹pack dev 서버를 실행하는 것을 더 좋아한다. 왜냐하면 그것은 훨씬 빠르기 때문이다.개발 과정에서 Rails는 웹 팩 dev 서버가 패키지를 컴파일했는지 판단할 수 있습니다. 컴파일이 없으면 Rails는 내부 연결 방식으로 컴파일합니다.
응용 프로그램을 계속 실행합시다.
# Terminal tab 1
rails s
# Terminal tab 2
./bin/webpack-dev-server
localhost:3000 로 이동하면 이제 Rails 시작 페이지가 표시됩니다.
새 리소스 생성
나는 개인적으로 데이터베이스에서 여러 개의 강좌 기록을 보고 응용 프로그램을 더욱 진실하게 보이는 것을 좋아한다.피드 데이터를 추가하는 것에 흥미가 없고, 메인 컨트롤러나 비슷한 것을 만들고 싶다면, 이 부분을 건너뛸 수 있습니다.
데이터베이스에서 레코드를 찾으려면 다음과 같은 작은 리소스를 사용하십시오.
rails generate scaffold Post title:string content:text
다음 명령을 사용하여 생성된 마이그레이션을 실행합니다.
rails db:migrate
db/seeds.rb를 열고 다음을 추가합니다.# db/seeds.rb
10.times do |n|
Post.create!(title: "Post title - ##{n}", content: "This is the content for the #{n.ordinalize} post.")
end
재미있는 부분에 들어가기 전에 우리가 해야 할 마지막 일은
config/routes.rb 파일을 업데이트하여 응용 프로그램의 루트 경로를 댓글의 색인 페이지로 만드는 것이다.# config/routes.rb
Rails.application.routes.draw do
resources :posts
root to: "posts#index"
end
localhost:3000로 이동하면 다른 CRUD 작업에 대한 링크가 있는 임의의 데이터가 포함된 테이블을 볼 수 있습니다.TailwindCSS 설치
지금 재미있는 일을 보러 오세요.
터미널에서 다음 명령을 실행하여 TailwindCSS 설치
yarn add tailwindcss
./node_modules/.bin/tailwind init
tailwind.config.js 파일을 만들어야 합니다.이 파일은 TailwindCSS 기본값 사용자 정의, 플러그인 추가 등에 사용할 수 있습니다.Tailwind's docs 에서 자세한 내용을 확인할 수 있습니다.Rails 6의 기본 구성이며 두 가지 새로운 요구 사항이 있습니다.
require('tailwindcss'),
require('autoprefixer'),
// postcss.config.js
module.exports = {
plugins: [
require('autoprefixer'),
require('postcss-import'),
require('tailwindcss'),
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
})
]
}
순풍을 배치하다
이 점을 할 수 있는 몇 가지 방법이 있지만, 이것은 나 개인의 선호이다.
assets 폴더를 삭제하면 Webpacker에 전적으로 의존하기 때문에 필요하지 않습니다.
rm -rf app/assets
touch app/javascript/src/application.scss
postcss-import 및 웹 패키지를 사용하고 있으므로 Tailwind docs 스타일시트 파일에 다음 내용을 추가하라는 메시지가 표시됩니다.// app/javascript/src/application.scss
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
app/javascript/packs/application.js 에 다음 행을 추가해야 합니다.import '../src/application.scss'
app/views/layouts/application.html.erb에서 변경:<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
localhost:3000 에서 다음을 볼 수 있습니다.
순풍이 이제 작용을 해야 하기 때문에 우리의 관점을 조정하고 순풍이 가져온 이익을 봅시다.
TailwindCSS를 사용하여 뷰 업데이트
app/views/layouts/application.html.erb 변경 내용:<body>
<%= yield %>
</body>
<body class="min-h-screen bg-gray-100">
<div class="container mx-auto">
<%= yield %>
</div>
</body>
app/views/posts/index.html.erb에서 프레임 페이지를 다음과 같이 대체합니다.<p id="notice"><%= notice %></p>
<h1 class="font-semibold text-4xl text-gray-700 my-8">Posts</h1>
<div class="w-full xl:w-8/12 mb-12 xl:mb-0 px-4">
<div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
<table class="items-center w-full bg-transparent border-collapse">
<thead>
<tr>
<th class="px-6 bg-gray-100 text-gray-600 align-middle border border-solid border-gray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left">Title</th>
<th class="px-6 bg-gray-100 text-gray-600 align-middle border border-solid border-gray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left">Content</th>
<th class="px-6 bg-gray-100 text-gray-600 align-middle border border-solid border-gray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left", colspan="3"></th>
</tr>
</thead>
<tbody>
<%% @posts.each do |post| %>
<tr>
<td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-left"><%= post.title %></td>
<td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-left"><%= post.content %></td>
<td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-left"><%= link_to 'Show', post %></td>
<td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-left"><%= link_to 'Edit', edit_post_path(post) %></td>
<td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-left"><%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>
<% end %>
</tbody>
</table>
</div>
</div>
<%= link_to 'New Post', new_post_path %>
localhost:3000 로 이동하면 다음 페이지가 보일 것입니다
추상적이다
이 시계는 보기에는 많이 좋아졌지만, 이 원소들의 종류는 매우 길고, 게다가 중복된다.그것들을 우리의 scss 파일로 추상화해서 정리합시다.
app/javascript/src/application.scss 에서 두 개의 새 클래스를 만듭니다..table-header {
@apply px-6 bg-gray-100 text-gray-900 align-middle border border-solid border-gray-200 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left;
}
.table-content {
@apply border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-left;
}
페이지를 다시 불러올 때, 이전과 같은 화면을 볼 수 있을 것입니다. 어두운 표 제목만 있을 것입니다.
총결산
TailwindCSS를 Rails 응용 프로그램에 추가하려는 사람들에게 도움이 되었으면 합니다.
Rails와 Tailwind CSS를 사용한 이 글에 관심이 있다면 댓글을 남기거나 트위터에 연락해 주세요. 저는 기꺼이 당신과 이야기를 나눌 것입니다.
View repo for this post
즐거운 인코딩!😄
Reference
이 문제에 관하여(Ruby on Rails 6 및 TailwindCSS 1.1.4 설정 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/andrewmcodes/ruby-on-rails-and-tailwindcss-1-1-4-mm5텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
