Rails 6 프로젝트에 TailwindCSS 추가하기

Tailwind + 레일 6

Rails 6 애플리케이션에서 tailwindCSS를 구성하는 단계

Tailwind CSS 설치

다음 명령을 실행하여 tailwind를 package.json

 yarn add tailwindcss

Tailwind 구성 만들기

다음 명령은 tailwind.config.js에 대한 기본 구성을 설정할 수 있는 TailwindCSS 파일을 생성합니다.

npx tailwindcss init

taildwind 구성 파일은 비어 있으며 다음과 같아야 합니다.

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

다음은 내tailwind.config.js의 예입니다.

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          100: "#fef6eb",
          200: "#f7c686",
          300: "#f4b35d",
          400: "#f2aa49",
          500: "#f1a035",
          600: "#d99030",
          700: "#c1802a",
          800: "#a97025",
          900: "#916020",
        },
      },
    },
  },
  purge: {
    content: ["./app/**/*.html.erb"],
  }
};

PostCSS 구성에 순풍 추가

postcss.config.js 파일에 다음 줄을 추가해야 합니다.

require("tailwindcss"),

다음은 내 postcss.config.js 파일의 예입니다.

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

귀하의 Javascript 팩에 tailwind 가져오기

javascript를 통해 tailwind를 가져와야 합니다.
application.css에 app/javascript/layouts/ 파일 생성

I usually keep this in a folder called layouts, you could choose any other folder that's convenient for you inside the app/javascript directory

지금 만든 application.css 파일에 다음을 추가하십시오.

/* tailwind */
@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

application.css 파일에서 app/javascript/packs/application.js를 가져옵니다.
(다음 줄 추가)

import  "../layouts/application.css";

레이아웃으로 Tailwind 가져오기

응용 프로그램 팩에 TailwindCSS를 추가했으므로 응용 프로그램에서 전 세계적으로 tailwind를 사용하려면 application.html.erb로 가져와야 합니다.
app/views/layouts/application.html.erb의 <head>에 다음 줄을 추가합니다.

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

Reference

이 문제에 관하여(Rails 6 프로젝트에 TailwindCSS 추가하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/bodhish/adding-tailwindcss-to-your-rails-6-project-2nk

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

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

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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