Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Curso B谩sico de Tailwind

Curso B谩sico de Tailwind

Ana Mar铆a D铆az Solorio

Ana Mar铆a D铆az Solorio

Nueva paleta de colores extendida

7/29
Recursos

Aportes 12

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Para agregar colores personalizados en Tailwind debemos agregarlos al archivo Tailwind.config.js


module.exports = {
  content: ['./public/index.html', './src/**/*.{html,js}'],
  theme: {
  extend: {
    colors:{
     primary:'#34a853',
     secondary:'#353535'
    },      
    }
  },
  plugins: [],
};

Tailwind cuenta con una amplia gama de colores que van cambiando de shades. Para probarlos, se puede utilizar el playground de tailwind: https://play.tailwindcss.com donde se pueden probar las funcionalidades de este framework.


Dentro del HTML, la palabra reservada class sirve para inicializar estilos de Tailwind. Es importante tener una paleta de colores propia para definir los colores a utilizar dentro del proyecto.


Para definir colores personalizados en Tailwind hacemos uso del archivo de configuraci贸n de Tailwind tailwind.config.js, dentro de la secci贸n theme colocamos un objeto de nombre colors y dentro de este se coloca la lista de colores que deseamos usar e incluso poder nombrarlos como en el siguiente ejemplo:

module.exports = {
  theme: {
    colors: {
      primary: '#5c6ac4',
      secondary: '#ecc94b',
			neutral: colors.indigo,
			'midnight': '#121063',
			'tahiti': {
        100: '#cffafe',
        200: '#a5f3fc',
        300: '#67e8f9',
      // ...
    }
  }
}

Ac谩 comparto la paleta de colores de la versi贸n 3.0 en un archivo figma por si le resulta 煤til a alguien.

https://www.figma.com/file/HuUdkljAkThqXNDCWeJZcO/Tailwind-CSS-Colors-(v3)?node-id=0%3A1

Veo que al personalizar mis propios colores dentro del archivo tailwind.conf.js ya no puedo usar la paleta de colores que tiene Tailwind, solamente la propia. Existe una forma para extender (usar la de tailwind y la mia) la paleta de colores con la opci贸n extend

module.exports = {
  content: [
    "./src/**/*.{html,js}",
    "./public/**/*.{html,js}",
  ],
  theme: {
    extend: {
      colors: {
        blue: {
          950: '#17275c',
        },
      }
    },
  },
  plugins: [],
}

Obviamente la nueva versi贸n es mejor porque tenemos muchos m谩s colores.

Tiene un width y un height diferentes porque, pues鈥 son diferentes 馃し馃徎鈥嶁檪锔

Para agregar mi paleta de colores agarr茅 mi color base y fui variando la luminancia en esta web: https://www.peko-step.com/es/tool/hslrgb.html

module.exports = {
  content: ['./public/index.html', './src/**/*.{html,js}'],
  theme: {
    extend: {
      colors: {
        ngreen: {
          50: '#E8FCF0',
          100: '#D1F9E2',
          200: '#BAF7D4',
          300: '#8CF2B8',
          400: '#30E880',
          500: '#16CE66',
          600: '#11A04F',
          700: '#0C6F38',
          800: '#074422',
          900: '#02160B',
        },
        nred: {
          50: '#FAE9E9',
          100: '#F6D4D4',
          200: '#EEA9A9',
          300: '#E67E7E',
          400: '#DE5353',
          500: '#D42828',
          600: '#AB2020',
          700: '#801818',
          800: '#551010',
          900: '#1D0505',
        },
        nyellow: {
          50: '#FEF7E5',
          100: '#FEF0CC',
          200: '#FDE19A',
          300: '#FDD267',
          400: '#FCC435',
          500: '#FDBA0B',
          600: '#C99102',
          700: '#976C01',
          800: '#644801',
          900: '#191200',
        },
      }
    },
  },
  plugins: [],
};

El playground de tailwind:
https://play.tailwindcss.com/

馃摑 Mis apuntes:

.
Tailwind incluye una paleta de colores predeterminada dise帽ada por expertos lista para usar que es un excelente punto de partida si no tiene su propia marca espec铆fica en mente.
.
Pero cuando necesite personalizar su paleta, puede configurar sus colores bajo la聽clave colors en la聽secci贸n theme del archivo聽tailwind.config.js

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      // Configure your color palette here
    }
  }
}

Cuando se trata de crear una paleta de colores personalizada, puede聽seleccionar sus colores聽de nuestra amplia paleta de colores incluida o聽configurar sus propios colores personalizados聽agregando sus valores de color espec铆ficos directamente.

Si quieren una paleta de colores pueden ir aqu铆 鈥> Colorhunt.co

En esta p谩gina tienen una configuraci贸n por defecto para el archivo tailwind.config.js que incluye unos cuantos colores y un par de tipografias (serif y sans-serif).

El c贸digo es el siguiente:

module.exports = {
content: [鈥./src/**/*.{html,js}鈥橾,
theme: {
colors: {
鈥榖lue鈥: 鈥#1fb6ff鈥,
鈥榩urple鈥: 鈥#7e5bef鈥,
鈥榩ink鈥: 鈥#ff49db鈥,
鈥榦range鈥: 鈥#ff7849鈥,
鈥榞reen鈥: 鈥#13ce66鈥,
鈥榶ellow鈥: 鈥#ffc82c鈥,
鈥榞ray-dark鈥: 鈥#273444鈥,
鈥榞ray鈥: 鈥#8492a6鈥,
鈥榞ray-light鈥: 鈥#d3dce6鈥,
},
fontFamily: {
sans: [鈥楪raphik鈥, 鈥榮ans-serif鈥橾,
serif: [鈥楳erriweather鈥, 鈥榮erif鈥橾,
},
extend: {
spacing: {
鈥8xl鈥: 鈥96rem鈥,
鈥9xl鈥: 鈥128rem鈥,
},
borderRadius: {
鈥4xl鈥: 鈥2rem鈥,
}
}
},
}

Notese que algunos colores no est谩n incluidos, como el rojo, as铆 que depende ustedes a帽adir o cambiar los que ya hay, as铆 como cambiar la tipograf铆a al gusto.