Домашняя страница Tailwind CSS
  1. Установка
  2. Установите Tailwind CSS с Ember.js

  1. Создайте свой проект

    Начните с создания нового проекта Ember.js, если у вас его еще нет. Самый распространенный подход — использовать Ember CLI.

    Terminal
    npx ember-cli new my-project --embroider --no-welcomecd my-project

  2. Установите CSS Tailwind

    Используя npm, установите tailwindcss и его одноранговые зависимости, а также postcss-loader, а затем запустите команду init, чтобы сгенерировать оба файла tailwind.config.js и postcss.config.js.

    Terminal
    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, {
    // Add options here
  });

  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 в свой CSS

    Создайте файл ./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.

    Terminal
    npm run start

  8. Начните использовать Tailwind в своем проекте

    Начните использовать служебные классы Tailwind для оформления своего контента.

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

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

{{outlet}}