Agregar Tailwind a proyecto Go

Instala npm y la dependencia.

npm init -y
npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

modifica el archivo tailwind.json.

Hay dos casos, si vas a usar templates/html usa esta configuración

module.exports = {
  content: ["./internal/templates/**/*.html"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Si vas a usar gomponents usa esta configuración

module.exports = {
  content: ["./internal/templates/**/*.go"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Ahora modifica el archivo package.json para poder ejecutar un comando de construcción del .css

Crea una carpeta de salida para los archivos .css

mkdir -p internal/static/css
"scripts": {
  "build:css": "tailwindcss -i ./internal/static/css/tailwind.css -o ./internal/static/css/output.css --watch"
}

agrega –minify si deseas el .css comprimido

Crea un archivo tailwind.css con este contenido

@tailwind base;
@tailwind components;
@tailwind utilities;

Finalmente, ejecuta el comando para generar el archivo

npm run build:css

Usa el archivo output.css

<link href="/static/css/output.css" rel="stylesheet">

Publicado

en

Etiquetas:

Comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *