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

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

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

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

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