Usar Tailwind CSS en un tema custom

Tutoriales
reading time 10

Vamos a ver el paso a paso usando un entorno local con DDEV.

Creamos el file: package.json en la raiz del theme custom que estemos usando

ddev npm init

Ahora instalamos los paquetes necesarios

dv npm install tailwindcss @tailwindcss/postcss postcss postcss-cli

El file package.json deberia quedar asi

{
  "name": "iobase",
  "version": "1.0.0",
  "description": "Base theme based on tailwind CSS and SDC",
  "main": "index.js",
  "scripts": {
    "build": "postcss ./css/main.css -o ./dist/main.css",
    "watch": "postcss ./css/main.css -o ./dist/main.css --watch"
  },
  "author": "jpfrancesconi",
  "license": "ISC",
  "dependencies": {
    "@tailwindcss/postcss": "^4.1.11",
    "postcss": "^8.5.6",
    "postcss-cli": "^11.0.1",
    "tailwindcss": "^4.1.11"
  }
}

 

Ahora tendremos que crear tres files para que tailwind CSS funciones y compile los cambios, todos estos files los creamos en la raiz de nuestro theme custom

File: webpack.config.js

touch webpack.config.js

Y le agregamos lo siguiente:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');


module.exports = {
  mode: 'production',
  entry: {
    main: './js/main.js',
  },
  devtool: 'source-map',
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, './build'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],
};

 

File: tailwind.config.js

touch tailwind.config.js

Y le agregamos lo siguiente

module.exports = {
  content: [
    "./templates/**/*.html.twig",
    "./templates/*.html.twig",
    "./components/**/*.twig",
    "./components/**/*.stories.json",
    "./components/**/*.stories.yml"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

File: postcss.config.mjs   

touch postcss.config.mjs

Y le agregamos lo siguiente

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

 

Ahora nos toca crear el file main.css que es el que tendra todo lo que se compilara para generar el dist/main.css que terminara levantando Drupal

Creamos entonces el file: /css/main.css al mismo nivel que la carpeta componentes

main.css

En la imagen se ve que nuestro theme de ejemplo se llama iobase.

 

Ahora si podemos probar compilar nuestra configuracion

ddev npm run build

Se nos tiene que generar la carpeta dist/main.css

dist

 

Ahora le vamos a decir a Drupal que use todo esto

Editamos el file: iobase.libraries.yml para agregar la entrada con la clave: main

clave main

Editamos el file iobase.info.yml para incluir la nueva libreria por defecto en todo el proyecto

info file

 

Listo ahora podemos limpiar cache y probar que efectivamente este disponible la libreria en nuestro proyecto.

inspeccionando el sitio