Un iniciador de Eleventy con Tailwind CSS y Alpine.js

Cuando decidí intentar basar mi sitio web personal actual en Eleventy , no quería reinventar la rueda: probé todos los iniciadores de Eleventy creados con Tailwind CSS que pude encontrar en Proyectos de inicio en la documentación.

Muchos de los principiantes parecían integrar Tailwind CSS de una manera artificial. Además, algunos de ellos parecían asumir que nadie actualiza la configuración de Tailwind sobre la marcha mientras trabaja en un sitio web. Por eso integré Eleventy con Tailwind CSS y Alpine.js. Tengo motivos para creer que le gustará la simplicidad de mi solución.

Un buen diseño es el menor diseño posible.

—Dieter Rams, Diez principios para un buen diseño

Si no estás interesado en los detalles, no dudes en coger mi entrante y empezar de inmediato.

Empezando

Voy a suponer que tiene conocimientos generales de Tailwind CSS , HTML, JavaScript, Nunjucks , la línea de comandos y npm.

Comencemos con una nueva carpeta, luego cdaccedamos a ella en la línea de comando e inicialicémosla con un package.jsonarchivo:

npm init -y

Ahora podemos instalar Eleventy y Tailwind CSS:

npm install -D @11ty/eleventy tailwindcss@latest

Necesitamos crear una página para probar si hemos configurado las cosas correctamente. En un caso de uso real, nuestras páginas usarán plantillas, por lo que también lo haremos aquí. Ahí es donde Nunjucks encaja en la mezcla, sirviendo como motor de plantillas.

Hagamos un nuevo archivo llamado index.njken la carpeta del proyecto. La designaremos como página de inicio:

{% extends "_includes/default.njk" %}
{% block title %}It does work{% endblock %}
{% block content %}  div    div      spanGood design/spanbr/      spanisbr/as little designbr/as possible/span    /div  /div{% endblock %}

Plantillas básicas

Ahora creemos una nueva carpeta en la carpeta del proyecto llamada _includes(y sí, el nombre de la carpeta importa). Dentro de esta nueva carpeta, crearemos un archivo llamado default.njkque usaremos como plantilla predeterminada para nuestro diseño. Mantendremos las cosas simples con un texto estándar HTML:

!DOCTYPE htmlhtml  head    title      {% block title %}Does it work?{% endblock %}    /title    meta charset="UTF-8"/    {% if description %}      meta name="description" content="{{description}}"/    {% endif %}    meta http-equiv="x-ua-compatible" content="ie=edge"/    meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/    link rel="stylesheet" href="/style.css?v={% version %}"/    {% block head %}{% endblock %}  /head  body    {% block content %}      {{ content | safe }}    {% endblock %}  /body/html

Configurando CSS de viento de cola

Hagamos una prueba de Tailwind CSS en la menor cantidad de movimientos posible. Primero, cree una nueva subcarpeta llamada stylesy un archivo en ella llamado tailwind.config.js:

module.exports = {  content: ['_site/**/*.html'],  safelist: [],  theme: {    extend: {      colors: {        change: 'transparent',      },    },  },  plugins: [],}

Luego, crea un archivo llamado tailwind.cssen esa misma stylescarpeta:

@tailwind base;@tailwind components;@tailwind utilities;@layer utilities {  .change {    color: transparent;  }}

Iniciar y construir el proyecto.

Ahora creemos otro archivo nuevo en el mismo directorio raíz llamado .gitignore. Esto nos permitirá definir qué archivos omitir al enviar el proyecto a un repositorio, como en GitHub:

_site/.DS_Storenode_modules/

A continuación, crearemos un archivo llamado .eleventy.js(tenga en cuenta el punto inicial) que básicamente configura Eleventy, diciéndole qué archivos mirar y dónde guardar su trabajo:

const now = String(Date.now())module.exports = function (eleventyConfig) {  eleventyConfig.addWatchTarget('./styles/tailwind.config.js')  eleventyConfig.addWatchTarget('./styles/tailwind.css')
  eleventyConfig.addPassthroughCopy({ './_tmp/style.css': './style.css' })
  eleventyConfig.addShortcode('version', function () {    return now  })};

Ahora podemos actualizar el package.jsonarchivo con todos los scripts que necesitamos para iniciar y construir el sitio durante el desarrollo. Las dependencias ya deberían estar ahí desde la configuración inicial.

{  "scripts": {    "start": "eleventy --serve  npx tailwindcss -i styles/tailwind.css -c styles/tailwind.config.js -o _site/style.css --watch",    "build": "ELEVENTY_PRODUCTION=true eleventy  NODE_ENV=production npx tailwindcss -i styles/tailwind.css -c styles/tailwind.config.js -o _site/style.css --minify"  },  "devDependencies": {    "@11ty/eleventy": "^1.0.0",    "tailwindcss": "^3.0.0"  }}

¡Oye, gran trabajo! Lo hicimos. Iniciemos oficialmente el sitio:

npm start

Abra la página http://localhost:8080en su navegador. No parecerá gran cosa, pero mira el título de la página en la pestaña del navegador:

Aún podemos comprobar un poco más para asegurarnos de que todo esté bien. Abre /styles/tailwind.config.jsy cambia el transparentvalor del color a otra cosa, por ejemplo black. La configuración de Tailwind debería recargarse, junto con la página en su navegador.

No pierdas de vista tu navegador y edítalo /styles/tailwind.csscambiando transparenta blacknuevamente. Su archivo CSS debería recargarse y actualizarse en su navegador.

¡Ahora podemos trabajar bien con Eleventy y Tailwind CSS!

Optimización de la salida

En este punto, Tailwind CSS funciona con Eleventy, pero el HTML generado no es perfecto porque contiene cosas como caracteres de nueva línea redundantes. Limpiémoslo:

npm install -D html-minifier

Agregue la siguiente línea al principio del .eleventy.jsarchivo:

const htmlmin = require('html-minifier')

También necesitamos htmlminconfigurar .eleventy.js:

eleventyConfig.addTransform('htmlmin', function (content, outputPath) {    if (      process.env.ELEVENTY_PRODUCTION       outputPath       outputPath.endsWith('.html')    ) {      let minified = htmlmin.minify(content, {        useShortDoctype: true,        removeComments: true,        collapseWhitespace: true,      });      return minified    }
    return content})

Estamos usando una transformación aquí que es algo de Eleventy. Las transformaciones pueden modificar la salida de una plantilla. En este punto, .eleventy.jsdebería verse así:

const htmlmin = require('html-minifier')const now = String(Date.now())module.exports = function (eleventyConfig) {  eleventyConfig.addWatchTarget('./styles/tailwind.config.js')  eleventyConfig.addWatchTarget('./styles/tailwind.css')  eleventyConfig.addShortcode('version', function () {    return now  })  eleventyConfig.addTransform('htmlmin', function (content, outputPath) {    if (      process.env.ELEVENTY_PRODUCTION       outputPath       outputPath.endsWith('.html')    ) {      let minified = htmlmin.minify(content, {        useShortDoctype: true,        removeComments: true,        collapseWhitespace: true,      })      return minified    }    return content  })}

Corramos npm startuna vez más. Verás que nada ha cambiado y eso se debe a que la optimización solo ocurre durante la compilación. Entonces, en lugar de eso, intentemos npm run buildy luego miremos la _sitecarpeta. No debería haber ni un solo carácter innecesario en el index.htmlarchivo. Lo mismo ocurre con el style.cssarchivo.

Un proyecto creado como este ya está listo para implementarse. ¡Buen trabajo!

Integrando Alpine.js

Decidí cambiar a Eleventy desde Gatsby.js porque me parecía demasiado JavaScript. Me gusta más la dosis razonable de JavaScript básico mezclado con Alpine.js . No entraremos en los detalles de Alpine.js aquí, pero vale la pena consultar el manual de Hugo DiFrancesco porque es un punto de partida perfecto.

Así es como podemos instalarlo en nuestro proyecto desde la línea de comando:

npm install -D alpinejs

Ahora necesitamos actualizar .eleventy.jscon esto la función que pasa cosas a través de Alpine.js:

eleventyConfig.addPassthroughCopy({  './node_modules/alpinejs/dist/cdn.js': './js/alpine.js',})

Por último, abriremos _includes/default.njky agregaremos Alpine.js justo antes de la /headetiqueta de cierre:

script src="/js/alpine.js?v={% version %}"/script

Podemos verificar si Alpine está funcionando agregando esto a index.njk:

{% extends "_includes/default.njk" %}
{% block title %}It does work{% endblock %}
{% block content %}  div    div      spanGood design/spanbr/      spanisbr/as little designbr/as possible/spanbr/      span x-data="{message:'  Hello World  '}" x-text="message"/span    /div  /div{% endblock %}

Lanzar el proyecto:

npm start

Si Alpine.js funciona, verá “Hola mundo” en su navegador. ¡Felicitaciones, dos veces!

I hope you can see how quick it can be to set up an Eleventy project, including integrations with Nunjucks for templating, Tailwind for styles and Alpine.js for scripts. I know working with new tech can be overwhelming and even confusing, so feel free to email me at csstricks@gregwolanski.com if you have problems starting up or have an idea for how to simplify this even further.