Configuración de un proyecto básico con TailwindCSS

January 13, 2021 Compartir

tutoriales

Guía paso a paso para poner en marcha un proyecto para comenzar a trabajar con TailwindCSS.

Introducción

En esta entrada presentaré una opción rápida para poner en marcha un proyecto básico para comenzar a utilizar la librería TailwindCSS.

Creamos la carpeta del proyecto

mkdir project
cd project

Inicializamos el proyecto

npm init -y

En la terminal veremos lo siguiente:

module.exports = {
    purge: [],
    theme: {
        extend: {},
    },
    variants: {},
    plugins: [],
}

Instalación de las librerías a utilizar

En este ejemplo utilizaremos las siguientes librerías TailwindCSS - Autoprefixer - PostCSS

npm install tailwindcss autoprefixer postcss-cli

Inicializar Tailwind

npx tailwindcss init

El comando anterior generará un archivo llamado tailwind.config.js, el cual contiene las opciones básicas de configuración de Tailwind.

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Si queremos contar con un archivo que contenga las opciones completas de Tailwind ejecutamos el siguiente comando:

npx tailwindcss init tailwind.config.full.js --full

Con lo cual obtenemos el siguiente archivo en nuestro proyecto:

...

module.exports = {
  purge: [],
  target: 'relaxed',
  prefix: '',
  important: false,
  separator: ':',
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
    },
    colors: {
      transparent: 'transparent',
      current: 'currentColor',

      black: '#000',
      white: '#fff',

      gray: {
        100: '#f7fafc',
        200: '#edf2f7',
        300: '#e2e8f0',
        400: '#cbd5e0',
        500: '#a0aec0',
        600: '#718096',
        700: '#4a5568',
        800: '#2d3748',
        900: '#1a202c',
      },
      red: {
        100: '#fff5f5',
        200: '#fed7d7',
        300: '#feb2b2',
        400: '#fc8181',
        500: '#f56565',
        600: '#e53e3e',
        700: '#c53030',
        800: '#9b2c2c',
        900: '#742a2a',
      },
      orange: {
        100: '#fffaf0',
        200: '#feebc8',
        300: '#fbd38d',

...

Crearemos un archivo llamado post.config.js:

touch post.config.js

En el archivo creado debemos agregar lo siguiente:

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer')
    ]
}

Creamos un archivo llamado tailwind.css en el directorio css.

Luego agregamos las siguientes líneas:

@tailwind base;

@tailwind components;

@tailwind utilities;

En el archivo package.json de nuestro proyecto, en la sección script, añadimos la línea que nos permitirá construir el CSS que utilizaremos, en este caso dicho archivo lo llamaremos styles.css:

...

"scripts": {
    "build": "postcss css/tailwind.css -o public/css/styles.css"
},

...

Ahora podremos generar styles.css ejecutando:

npm run build

Creamos un archivo HTML inicial en el que importaremos el CSS creado

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inicio</title>
    <link rel="stylesheet" href="css/styles.css"> 
</head>
<body>
    <h1>Hello world!!</h1>
</body>
</html>

Servidor web

Para revisar nuestro trabajo necesitaremos un servidor web local. En nuestro caso utilizaremos live-server.

Si no lo tienes instalado, puedes hacerlo con el siguiente comando:

npm install live-server -g

Y podemos levantar el servidor de esta forma:

live-server public

Todo está listo!, ya podemos empezar a crear cosas fabulosas con Tailwind CSS 😄

Autor

Hola 👋, Soy Alejandro, un desarrollador de software que disfruta crear y mejorar herramientas que resuelvan problemas y hagan que la vida de las personas sea más sencilla, bella y cómoda. Algunas veces escribo sobre las cosas que he aprendido con el tiempo. Espero que el contenido te sea de ayuda.