Instalar Tailwind CSS con Ember.js

Configurando Tailwind CSS en un proyecto Ember.js.

Crea tu proyecto

Comienza creando un nuevo proyecto Ember.js si aún no tienes uno configurado. El enfoque más común es usar Ember CLI.

Terminal

npx ember-cli new my-project --embroider --no-welcome
cd my-project

Instala Tailwind CSS

Usando npm, instala @tailwindcss/postcss y sus dependencias peer, así como postcss-loader.

Terminal

npm install tailwindcss @tailwindcss/postcss postcss postcss-loader

Habilita el soporte para PostCSS

En tu archivo ember-cli-build.js, configura PostCSS para procesar tus archivos 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: ['postcss-loader'],
            },
          ],
        },
      },
    },
  });
};

Configura los plugins de PostCSS

Crea un archivo postcss.config.mjs en la raíz de tu proyecto y añade el plugin @tailwindcss/postcss a tu configuración de PostCSS.

postcss.config.mjs

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
}

Importa Tailwind CSS

Crea un archivo ./app/app.css y añade un @import para Tailwind CSS.

app.css

@import "tailwindcss";

Importa el archivo CSS

Importa el archivo ./app/app.css recién creado en tu archivo ./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);

Inicia tu proceso de build

Ejecuta tu proceso de build con npm run start.

Terminal

npm run start

Comienza a usar Tailwind en tu proyecto

Comienza a usar las clases de utilidad de Tailwind para estilizar tu contenido.

application.hbs

{{page-title "MyProject"}}
<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>
{{outlet}}