Ember.js: Tailwind CSS 설치

TL; DR

$ ember install ember-cli-postcss                   # Install ember-cli-postcss
$ npm install --save-dev tailwindcss                # Install tailwindcss

$ npx tailwind init app/styles/tailwind.config.js   # Optional: Generate a Tailwind config file for your project  
$ npm install -save-dev postcss-import              # Optional: If you want to use the @import statement

/* app/styles/app.css */

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

// ember-cli-build.js

// ... 

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    postcssOptions: {
      compile: {
        plugins: [
          // { module: require('postcss-import') }, // If you installed postcss-import
          require('tailwindcss'), 
          // require('tailwindcss')('./app/styles/tailwind.config.js'), // If you have a Tailwind config file.
        ]
      }
    }
  });

  // ...
};

개요

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

• https://tailwindcss.com/

목표는 Ember.js 앱을 PostCSS과 통합하고 Tailwind을 플러그인으로 사용하는 것입니다.

PostCSS is a tool for CSS syntax transformations.
It allows you to define custom CSS like syntax that could be understandable and transformed by plugins.

• https://github.com/postcss/postcss/blob/master/docs/architecture.md#overview

수많은 플러그인이 있으며 Tailwind가 그중 하나였습니다.

ember-cli-postcss 설치

첫 번째 단계는 앱을 PostCSS과 통합하는 것입니다.

PostCSS를 Ember.js와 통합하는 데 도움이 되는 추가 기능을 사용할 수 있습니다ember-cli-postcss.

$ ember install ember-cli-postcss

ember-cli-postcss에 대한 자세한 내용은 documentation을 확인하십시오.

Tailwind 설치

이제 npm 또는 yarn를 사용하여 Tailwind 패키지를 직접 설치할 수 있습니다.

# Using npm
$ npm install --save-dev tailwindcss

# Using Yarn
$ yarn add --dev tailwindcss

CSS에 Tailwind 추가

tailwind를 설치한 후 @tailwind 지시문을 사용하여 Tailwind의 base , components 및 utilities 스타일을 CSS에 삽입해야 합니다.

/* app/styles/app.css */

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

Tailwind는 빌드 시 이러한 지시문을 생성된 모든 CSS로 교체합니다.

Tailwind 구성 파일 만들기(선택사항)

Note: If you don't need to customize your Tailwind installation you can skip this step, and do it when you need to.

Tailwind 설치를 사용자 지정하려는 경우 Tailwind CLI를 사용하여 프로젝트에 대한 구성 파일을 생성할 수 있습니다.

$ npx tailwind init app/styles/tailwind.config.js

Tailwind 구성에 대한 자세한 내용은 documentation 을 확인하십시오.

Tailwind로 CSS 처리

마지막 단계는 빌드 체인에 Tailwind를 PostCSS 플러그인으로 추가하는 것입니다.

이는 tailwindcss 에서 ember-cli-postcss 로 전달하는 플러그인 목록에 ember-cli-build.js 를 추가하는 것을 의미합니다.

// ember-cli-build.js

// ... 

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    postcssOptions: {
      compile: {
        plugins: [
          require('tailwindcss'), 
          // require('tailwindcss')('./app/styles/tailwind.config.js'), // If you have a Tailwind config file. 
        ]
      }
    }
  });

  // ...
};

이제 완료되었습니다. PostCSS 및 Tailwind을 앱에 성공적으로 추가했습니다.

postcss-import 설치(선택사항)

@import 문을 사용하여 다른 파일에서 스타일을 가져오고 CSS를 여러 파일로 분할하려면 postcss-import가 필요합니다.

# Using npm 
$ npm install --save-dev postcss-import

# Using Yarn 
$ yarn add --dev postcss-import

postcss-import는 (tailwindcss와 같은) PostCSS 플러그인이므로 빌드 체인에 추가해야 합니다.

이는 postcss-import 에서 ember-cli-postcss 로 전달하는 플러그인 목록에 ember-cli-build.js 를 추가하는 것을 의미합니다.

// ember-cli-build.js

// ... 

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    postcssOptions: {
      compile: {
        plugins: [
          { module: require('postcss-import') }, 
          require('tailwindcss'), 
          // require('tailwindcss')('./app/styles/tailwind.config.js'), // If you have a Tailwind config file. 
        ]
      }
    }
  });

  // ...
};

이제 @import에서 app.css 문을 사용할 수 있습니다.

/* app/styles/app.css */

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

@import "custom"  /* This will import the CSS form custom.css */