Tailwind CSS home page
  1. 시작하기
  2. Ember.js에서 Tailwind CSS 설치

  1. 프로젝트 생성

    아직 프로젝트를 설정하지 않았다면, 새로운 Ember.js 프로젝트를 생성하세요. 가장 일반적인 방법은 Ember CLI를 사용하는 것입니다.

    터미널
    npx ember-cli new my-project --embroider --no-welcomecd my-project

  2. Tailwind CSS 설치

    npm을 사용하여 tailwindcss와 그 의존성, 그리고 postcss-loader를 설치한 후, init 명령어를 실행하여 tailwind.config.js와 postcss.config.js를 생성하세요.

    터미널
    npm install -D tailwindcss postcss postcss-loader autoprefixernpx tailwindcss init -p

  3. PostCSS 지원 활성화

    ember-cli-build.js 파일에서 PostCSS를 설정하여 CSS 파일을 처리하세요.

    ember-cli-build.js
    'use strict';

const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function (defaults) {
  const app = new EmberApp(defaults, {
    // 옵션 추가
  });

  const { Webpack } = require('@embroider/webpack');
  return require('@embroider/compat').compatBuild(app, Webpack, {
    skipBabel: [
      {
        package: 'qunit',
      },
    ],
    packagerOptions: {
      webpackConfig: {
        module: {
          rules: [
            {
              test: /\.css$/i,
              use: [
                {
                  loader: 'postcss-loader',
                  options: {
                    postcssOptions: {
                      config: 'postcss.config.js',
                    },
                  },
                },
              ],
            },
          ],
        },
      },
    },
  });
};

  4. 템플릿 경로 설정

    tailwind.config.js 파일에 모든 템플릿 파일의 경로를 추가하세요.

    tailwind.config.js
    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./app/**/*.{gjs,gts,hbs,html,js,ts}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

  5. Tailwind 지시어 추가

    ./app/app.css 파일을 생성하고 Tailwind의 각 레이어에 대한 @tailwind 지시어를 추가하세요.

    app.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

  6. CSS 파일 임포트

    새로 생성된 ./app/app.css 파일을 ./app/app.js 파일에 임포트하세요.

    app.js
    import Application from '@ember/application';
import Resolver from 'ember-resolver';
import loadInitializers from 'ember-load-initializers';
import config from 'my-project/config/environment';
import 'my-project/app.css';

export default class App extends Application {
  modulePrefix = config.modulePrefix;
  podModulePrefix = config.podModulePrefix;
  Resolver = Resolver;
}

loadInitializers(App, config.modulePrefix);

  7. 빌드 프로세스 시작

    npm run start로 빌드 프로세스를 실행하세요.

    터미널
    npm run start

  8. 프로젝트에서 Tailwind 사용 시작

    Tailwind의 유틸리티 클래스를 사용하여 콘텐츠를 스타일링하세요.

    application.hbs
    {{page-title "MyProject"}}

<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>

{{outlet}}