No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso B谩sico de Tailwind 2 y 3

Curso B谩sico de Tailwind 2 y 3

Ana Mar铆a D铆az Solorio

Ana Mar铆a D铆az Solorio

Tailwind como API para la creaci贸n de un Design System

12/29
Recursos

Aportes 13

Preguntas 8

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Las im谩genes para este curso las encontramos en el proyecto de Github, en la carpeta public/img:

C贸digo a escribir:

backgroundImage: {
鈥榮anFrancisco鈥: 鈥渦rl(鈥欌/img/sanFrancisco.jpg鈥)鈥,
鈥榮anFranciscoDesktop鈥: 鈥渦rl(鈥欌/img/sanFranciscoDesktop.jpg鈥)鈥,
鈥榶osemite鈥: 鈥渦rl(鈥欌/img/yosemite.jpg鈥)鈥,
鈥楲A鈥: 鈥渦rl(鈥欌/img/LA.jpg鈥)鈥,
鈥榮eattle鈥: 鈥渦rl(鈥欌/img/seattle.jpg鈥)鈥,
鈥榥ew_york鈥: 鈥渦rl(鈥欌/img/new_york.jpg鈥)鈥,
鈥榥orway鈥: 鈥渦rl(鈥欌/img/norway.jpg鈥)鈥,
鈥榮ydney鈥: 鈥渦rl(鈥欌/img/sydney.jpg鈥)鈥,
鈥榤iami鈥: 鈥渦rl(鈥欌/img/miami.jpg鈥)鈥,
鈥榮witzerland鈥: 鈥渦rl(鈥欌/img/switzerland.jpg鈥)鈥,
鈥榖ali鈥: 鈥渦rl(鈥欌/img/bali.jpg鈥)鈥,
鈥榗hicago鈥: 鈥渦rl(鈥欌/img/chicago.jpg鈥)鈥,
鈥榚urope鈥: 鈥渦rl(鈥欌/img/europe.jpg鈥)鈥,
鈥榠celand鈥: 鈥渦rl(鈥欌/img/iceland.jpg鈥)鈥,
},
backgroundColor: theme =>({
鈥heme(鈥榗olors鈥),
鈥榩rimary鈥: 鈥#CC2D4A鈥,
鈥榮econdary鈥: 鈥#8FA206鈥,
鈥榯ertiary鈥: 鈥#61AEC9鈥,
}),
textColor:{
鈥榩rimary鈥: 鈥#CC2D4A鈥,
鈥榮econdary鈥: 鈥#8FA206鈥,
鈥榯ertiary鈥: 鈥#61AEC9鈥,
},
Notese que la profesora escribe dos veces norway en el c贸digo, pero en total son 14 imagenes y no 15.

Les dejo los cambios que se deben de hacer para escribir los codigos en la versi贸n 3.x de Tailwind, este mismo puede quedar obsoleto en versiones futuras por lo que se recomienda checar las documentaci贸n de la versi贸n actual

  1. Para crear un 鈥渟hortcut鈥 del comando para ir compilando los cambios con Tailwind escribir en la secci贸n del archivo 鈥減ackage.json鈥
"scripts": {
    //...
    "tw:build": "tailwindcss -i ./src/css/tailwind.css -o ./public/css/tailwind.css --watch"
  },
    1. Hacer uso del 鈥渟hortcut鈥 desde la consola se realiza:
npm run tw:build
  1. En el archivo 鈥渢ailwind.config.js鈥 copiar y pegar el siguiente c贸digo (para que pueda funcionar en esta versi贸n).
 theme: {
    colors: {
      'primary':"#CC2D4A",
      'secondary':"#8FA206",
      'tertiary':"#61AEC9",
    },
    fontFamily: { 
      Montserrat: ["Monserrat", "sans-serif"],
    },
    extend: {
      backgroundImage: {
        'sanFrancisco': "url('../img/sanFrancisco.jpg')",
			  'sanFranciscoDesktop': "url('../img/sanFranciscoDesktop.jpg')",
			  'yosemite': "url('../img/yosemite.jpg')",
			  'LA': "url('../img/LA.jpg')",
			  'seattle': "url('../img/seattle.jpg')",
			  'new_york': "url('../img/new_york.jpg')",
			  'norway': "url('../img/norway.jpg')",
			  'sydney': "url('../img/sydney.jpg')",
			  'miami': "url('../img/miami.jpg')",
			  'switzerland': "url('../img/switzerland.jpg')",
			  'bali': "url('../img/bali.jpg')",
			  'norway': "url('../img/norway.jpg')",
			  'chicago': "url('../img/chicago.jpg')",
			  'europe': "url('../img/europe.jpg')",
			  'iceland': "url('../img/iceland.jpg')",
      }
    },
  },
  1. En su archivo 鈥渋ndex.html鈥 importar la tipograf铆a Montserrat
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
  1. Pueden descargar las im谩genes desde el siguiente repositorio en GitHub.

Un design system es el archivo donde se definen todos los estilos, tama帽os, tipograf铆as y colores que se usar谩n en el proyecto.

Se crea el comando en package.json para hacer build: "tw:build": "tailwind -i ./src/css/tailwind.css -o ./public/css/tailwind.css --watch". Nota que al final se usa --watch para no tener que escribir el comando una y otra vez cada vez que se modifique el archivo de configuraci贸n, 煤nicamente basta con guardar los cambios y por s铆 mismo har谩 el build.

Se agregan los estilos del proyecto al archivo de configuraci贸n tailwind.config.js:

module.exports = {
  content: ["./public/index.html", "./src/**/*.{html,js}"],
  theme: {
    extend: {
      backgroundImage: {
        sanFrancisco: "url('../img/sanFrancisco.jpg')",
        sanFranciscoDesktop: "url('../img/sanFranciscoDesktop.jpg')",
        yosemite: "url('../img/yosemite.jpg')",
        LA: "url('../img/LA.jpg')",
        seattle: "url('../img/seattle.jpg')",
        new_york: "url('../img/new_york.jpg')",
        norway: "url('../img/norway.jpg')",
        sydney: "url('../img/sydney.jpg')",
        miami: "url('../img/miami.jpg')",
        switzerland: "url('../img/switzerland.jpg')",
        bali: "url('../img/bali.jpg')",
        norway: "url('../img/norway.jpg')",
        chicago: "url('../img/chicago.jpg')",
        europe: "url('../img/europe.jpg')",
        iceland: "url('../img/iceland.jpg')",
      },
      backgroundColor: (theme) => ({
        ...theme("colors"),
        primary: "#CC2D4A",
        secondary: "#8FA206",
        terciary: "#61AEC9",
      }),
      textColor: {
        primary: "#CC2D4A",
        secondary: "#8FA206",
        terciary: "#61AEC9",
      },
      fontFamily: {
        Montserrat: ["Montserrat", "sans-serif"],
      },
    },
  },
  plugins: [],
};

Se tiene que hacer un build cada vez que se edite el archivo de configuraci贸n.

Copy & Paste!


			  'sanFrancisco': "url('../img/sanFrancisco.jpg')",
			  'sanFranciscoDesktop': "url('../img/sanFranciscoDesktop.jpg')",
			  'yosemite': "url('../img/yosemite.jpg')",
			  'LA': "url('../img/LA.jpg')",
			  'seattle': "url('../img/seattle.jpg')",
			  'new_york': "url('../img/new_york.jpg')",
			  'norway': "url('../img/norway.jpg')",
			  'sydney': "url('../img/sydney.jpg')",
			  'miami': "url('../img/miami.jpg')",
			  'switzerland': "url('../img/switzerland.jpg')",
			  'bali': "url('../img/bali.jpg')",
			  'norway': "url('../img/norway.jpg')",
			  'chicago': "url('../img/chicago.jpg')",
			  'europe': "url('../img/europe.jpg')",
			  'iceland': "url('../img/iceland.jpg')",

Recuerden a帽adir los colores del tema en la propiedad de textColor
De lo contrario cuando intenten darle color a los textos solo reconocer谩 primary, secondary, terciary鈥

textColor: theme => ({
			...theme('colors'),
			primary: '#CC2D4A',
			secondary: '#8FA206',
			terciary: '#61AEC9',
		}),

Link

Dejo las im谩genes en un repositorio para que sea m谩s f谩cil la descarga

chale, no me funciona, no jalan los colores personalizados.

npm run tw:build

al parecer el npm run tw:build ya no es necesario en la version 3.0

Hola, Les dejo un link con todas las imag茅nes en un archivo comprimido

Images

Estos son los comando que utilice para abreviarlo al momento de ejecutarlos. Watch funciona con la nueva actualizaci贸n de TAILWIND aplicando 鈥渏it mode鈥 que es para ver los cambios desde el vsc y Minify que es para minificar el c贸digo de tailwind.

鈥渨atch鈥: 鈥渢ailwindcss -i src/tailwind.css -o style.css --watch鈥,

"minify": "tailwindcss -i src/tailwind.css -o style.css --minify"

agreguen el watch para que compilen los estilos
"tw:build": 鈥渢ailwind -i ./src/css/tailwind.css -o ./public/css/tailwind.css --watch鈥

Si quieren ver toda la configuraci贸n de tailwind por defecto pueden ejecutar el siguiente comando:

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

Tambi茅n les dejo mi archivo de configuraci贸n de tailwind:

module.exports = {
  content: ['./public/**/*.{html,js}'],
  theme: {
    extend: {
      backgroundColor: {
        primary: '#cc2d4b',
        secondary: '#8fa206',
        terciary: '#61AEC9',
      },
      textColor: {
        primary: '#cc2d4b',
        secondary: '#8fa206',
        terciary: '#61AEC9',
      },
      backgroundImage: {
        sanFrancisco: "url('../img/sanFrancisco.jpg')",
        sanFranciscoDesktop: "url('../img/sanFranciscoDesktop.jpg')",
        yosemite: "url('../img/yosemite.jpg')",
        LA: "url('../img/LA.jpg')",
        seattle: "url('../img/seattle.jpg')",
        new_york: "url('../img/new_york.jpg')",
        norway: "url('../img/norway.jpg')",
        sydney: "url('../img/sydney.jpg')",
        miami: "url('../img/miami.jpg')",
        switzerland: "url('../img/switzerland.jpg')",
        bali: "url('../img/bali.jpg')",
        chicago: "url('../img/chicago.jpg')",
        europe: "url('../img/europe.jpg')",
        iceland: "url('../img/iceland.jpg')",
      },
      fontFamily: {
        Montserrat: ['Montserrat', 'sans-serif'],
      },
    },
  },
  plugins: [],
};