Colores

Aquí esta el linea para crear el archivo de configuración

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

Yumi

Para la gente que no le funcione el autocompletado tienen que ir a Settings–>includeLanguages y les debería de aparecer el de Tailwind CSS, agregan como item plaintext y de value html.
Espero que les haya sido de ayuda!

Emmanuel David Garnica Pérez

Hola! les comparto un cheatsheet muy bueno para ver todas las propiedades disponibles por default en tailwindcss https://nerdcave.com/tailwind-cheat-sheet

fernandomunoz

Platzi Team

Mis apuntes de esta clase:

<h1>3.1 Colores</h1>

Los elementos que pueden ser afectados por los colores son:

Fondo.
Texto.
Bordes.
Placeholder.

Taildwind por default tiene valores ya predefinidos, para conocerlos tenemos que generar un archivo de configuración con todos los valores completos:
npx tailwindcss init tailwind.config.full.js --full

Se puede ver la paleta de colores por defecto aquí:
https://tailwindcss.com/docs/customizing-colors/#default-color-palette

Deyvi Edwin Jara García

Estimados que plugin usa el profe para que se vea los colores en el archivo tailwind.config.full.js

Emmanuel Rodríguez Ramírez

DOCUMENTACIÓN - PASOS A SEGUIR PARA INSTALACIÓN Y PRIMEROS PASOS TAILWIND CSS

Nota

Cuando nostros creamos y agregamos las siguientes lineas al CSS:

/*tailwind.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;

Procesamos un archivo con las configuraciones por default de Tailwind via el scrip build descrito por:

...
"build": "postcss css/tailwind.css -o public/css/style.css"
...

El cual, y nada más observamos, a través de tailwind.config.full.js. Por lo que, con o sin el archivo generado, estamos viendo el resultado con PostCSS por default.
Si deseamos generar un archivo de CSS con la configuración establecida en tailwind.config.js, debemos agregar los siguientes cambios al archivo de PostCSS:

// postcss.config.js
module.exports = {
  plugins: [
    require('tailwindcss')('./tailwindcss.config.js'),
  ],
}

Maria Fernanda Martinez Labra

hace 3 meses

EN ESTA CLASE ME ENCONTRÉ CON QUE NO SE ME REFLEJABAN LOS CAMBIOS EN CUANDO AL COLOR, LES COMPARTO LOS PASOS QUE SEGUI DESPUES DE BUSCAR UNA SOLUCIÓN:

(EN MI CASO TUVE QUE HACER TODO DESDE CERO, PERO DEPENDE DE CADA QUIEN SI LO HACE DESDE CERO O NO)

1. CREE LA CARPETA DE MI PROYECTO Y DENTRO DE LA CARPETA EJECUTE LOS SIGUIENTES COMANDOS

npm init -y
npm i tailwindcss

2. AHORA ENTRAS A TU EDITOR DE CÓDIGO PREFERIDO Y CREAS UN DIRECTORIO:

src/estilos.css

3. DENTRO DEL DIRECTORIO CREADO ANTERIORMENTE PONEMOS LAS SIGUIENTES LINEAS Y GUARDAMOS:

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

4.COMPILAMOS PARA CREAR NUESTRO ARCHIVO DE SALIDA

¡OJO AQUI! YA QUE EL ARCHIVO QUE SE GENERA (output.css) DEBE TENER MÁS DE 19,000 LINEAS
(EN MI CASO SON LOS PASOS ENSEÑADOS EN LA CLASE, MI ARCHIVO GENERABA UNICAMENTE 418 LINEAS, LO CUAL POR LO QUE LEÍ, ES INCORRECTO)

npx tailwindcss-cli -i src/estilos.css -o public/output.css --watch

5.CREAMOS NUETRO ARCHIVO index.html DENTRO DEL DIRECTORIO QUE SE CREO EN EL PASO ANTERIOR
->public<- Y LLAMAMOS A LOS ESTILOS

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="output.css">
</head>

<body>
    <h1 class="mt-20">Hola Tailwind</h1>
</body>

</html>

6.AHORA EJECUTAMOS EL SIGUIENTE COMANDO

npx tailwindcss init

ESTE COMANDO NOS GENERARÁ EL ARCHIVO

tailwind.config.js

7.DENTRO DE ESTE ARCHIVO DEBERÁ ESTAR LO SIGUIENTE (YO LO PUSE DE PRUEBA NO ES NECESARIO)

module.exports = {
  purge: [],
  theme: {
    extend: {
      colors: {
        danger: '#ff5f40',
        info: {
          900: '#234e52',
          800: '#285e61',
        }
      },
    },
    fontFamily: {
      rale: ['Raleway'],
    },
  },
  variants: {},
  plugins: [],
}

8. ¡NO OLVIDEN COMPILAR NUEVAMENTE EL CÓDIGO PARA ACTUALIZAR EL ARCHIVO CSS DE SALIDA!

npx tailwindcss-cli -i src/estilos.css -o public/output.css --watch

9. UNA VEZ COMPILADO Y ACTUALIZADO NUESTRO ARCHIVO CSS DE SALIDA, HACEMOS UNA PRUEBA PARA VERIFICAR QUE YA ESTE FUNCIONANDO TODO CORRECTO

<body>
<h1 class="text-danger">Lorem, ipsum dolor.</h1>
<h2 class="bg-yellow-500 text-white">Lorem, ipsum dolor.</h2>
</body>

¡Y LISTO, CON ESTOS PASOS A MI ME FUNCIONÓ, ADICIONAL A ESTO LES COMPARTO LA DOCUMENTACIÓN DE LA QUE SAQUE ESTOS PASOS POR SI GUSTAN VERIFICARLOS, SALUDOS!

Cindy Yuliana Castro Plazas

buen dia, dos preguntas
1. sigo el paso a paso y no me cambio el estilo

Captura de Pantalla 2021-03-16 a la(s) 10.13.22 a. m..png

2. active el Color Highlight y no funciono, no se si tenga que ver la version de tailwind ya que la que tengo es la 2.0.3

Captura de Pantalla 2021-03-16 a la(s) 10.16.33 a. m..png

Juan Gui Arenas

//Cambiar un fondo (bg- + color)
//Cambiar color a un texto (text-red-600)
 <p class="bg-yellow-500 text-red-600" >Hola Soy un texto con Tailwind</p>

//Borde a un input (border-2 border-blue 300) ponemos color
<input class="border-2 border-blue-300 placeholder-green-600"  type="text" placeholder="Lorem ipsum">

Julian David Alzate Cuervo

hace 8 meses

Para los que tuvieron problemas con la sugerencia de las clases,

ctrl + space antes de crear la clase y listo!!

Rodrigo Escobar Lopez

Por si alguno tubo error al utilizar la versión 3 de tailwind, les recomiendo que en el content del archivo tailwind.config.js coloquen el siguiente bloque “./public/**/*.{html,js}”, para que el archivo les quede de la siguiente manera y les pueda funcionar el cambio de colores y demás

module.exports = {
  content: ["./public/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Terech

You can add other npm faciities: This command will create a file where you will can see all css properties for tailwind.

👇

In terminal

tailwind_test % npx tailwindcss init tailwind.cong.full.js --full
  
   tailwindcss 1.7.3
  
   ✅ Created Tailwind config file: tailwind.cong.full.js
  
tailwind_test %

Ruben Garcia

https://tailwindcss.com/docs/background-color

Elementos afectados por colores:

Fondo
Texto
Bordes
Placeholder

Para cambiar los colores de los elementos debes incluir las clases correspondientes al elemento:

Ejem:
Aquí puedes encontrar información para cambiar los background

Gonzalo Pimentel

Veo que algunos tuvieron problemas con los estilos y las clases, asegúrense de tener bien linkeado la ruta de su archivo style.css en su html, en mi caso es así:

Rafael de Jesús León Alfaro

Tailwind me está resultando muy interesante, hasta aquí mi percepción es que es un Bootstrap pero mucho más poderoso.

Mateo Aquino

A alguien mas no le funciona la extencion de IntelliSense en VSC?

Diego M, Maldini Freyre

Por las dudas, a mí no me aplicaba los estilos (el fondo amarillo, por caso) porque no tenía instalado postcss, así que simplemente ejecuté esta línea en la consola:

$ npm i postcss -D

(Sin el “$”)
(-D es para ponerlo como dependencia de desarrollo, puede omitirse)
(Escribir “i” es igual que poner “install”)

Juan Gui Arenas

Para los que no les sirve el tailwind en el HTML tienen que ir a Settings > poner includeLanguages, les debe salir Tailwind CSS, en add item ponen plaintext, value : html dan ok

josenegrin

al crear el nuevo archivo con el siguiente codigo

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

me doy cuenta que el archivo sencillamente hace un import require de tailwind/colors

y en el archivo que creamos tailwind.config.full.js --full se importan las variables de los colores mas no se muestran los colores en el archivo

este es un fragmento del codigo que crea

onst colors = require('tailwindcss/colors')

module.exports = {
  purge: [],
  presets: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px',
    },
    colors: {
      transparent: 'transparent',
      current: 'currentColor',

      black: colors.black,
      white: colors.white,
      gray: colors.coolGray,
      red: colors.red,
      yellow: colors.amber,
      green: colors.emerald,
      blue: colors.blue,
      indigo: colors.indigo,
      purple: colors.violet,
      pink: colors.pink,
    },

más sin embargo cuando agregas las variables en el h1 si que se importan.

La solución que conseguí si necesitan ver los colores es verlos a través de el enlace https://tailwindcss.com/docs/customizing-colors

Abner Batz

Tailwind por default tiene valores predefinidos y lo podemos conocer al generar un archivo de configuración con todos los valores completos,con esta línea de comandos
npx tailwindcss init tailwind.config.full.js --full

Francisco Cesare

algun error tengo que no me cambia los colores que se ven en el browser…

David Gustavo Lopez Figueroa

Si no les funciona emmet cuando escriban html, deben linkear bien su archivo css justo asi:

href="./css/style.css"

Saludos!

Carlos Roberto Villatoro Barrios

npx tailwindcss init --full

deberán borrar el archivo ya creado y esto traerá todo lo que el profesor tiene

Valeria Vichy

Confirmo: si no les funciona el intellisense de tailwind reinicien el VSCode, la vieja confiable.

Ángel David Roque Ayala

https://tailwindcss.com/docs/customizing-colors

Colores

<h3>Elementos</h3>

Los elementos que pueden cambiar de color son:

Fondo bg-yellow-300
Texto text-yellow-300
Bordes border border-yellow-300
Placeholder placeholder-yellow-300

<h3>Colores por defecto</h3>

black: colors.black,
white: colors.white,
gray: colors.coolGray,
red: colors.red,
yellow: colors.amber,
green: colors.emerald,
blue: colors.blue,
indigo: colors.indigo,
purple: colors.violet,
pink: colors.pink.

La intensidad de color se especifica con los números 50, 100, 200, 300, 400, 500, 600, 700, 800, 900

<h3>Personalizar colores</h3>

Tailwind incluye un paleta de colores creado por expertos. Están pensados para encajar en la mayoría de los proyectos.

Pero tu puedes construir tu propia paleta de colores.

<h4>Crea tu paleta de colores</h4>

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      indigo: {
				// theme('colors.indigo.light')
        light: '#b3bcf5',
        DEFAULT: '#5c6ac4',
        dark: '#202e78',
      }
    }
  }
}

Los diferentes segmentos del nombre del color se combinan para formar nombres de clases como bg-indigo-light.
Como muchos otros lugares en Tailwind, la tecla DEFAULT es especial y significa “sin modificador”. text-indigo
Puedes acceder a los colores usando la función theme()

<h4>Extender paleta</h4>

Si no deseas sobreescribir los colores por defecto también puedes extenderlos.

Documentación tailwind css

Jaime David Burbano Montoya

Genial, parece magía y por eso me surge una duda. ¿Donde puedo ver todos los estilos organizados por tipo para saber cual puedo aplicar?

Juan Teixeira

No me funcionan las clases de Tailwind debe ser porque no tengo bien la ruta.! :S

Jaime David Burbano Montoya

Aquí pueden ver toda la documentación de los colores
https://tailwindcss.com/docs/customizing-colors

Juan Teixeira

Alguien me puede ayudar con este error?

Resource interpreted as Stylesheet but transferred with MIME type text/html: “http://localhost:8080/css/style.css”.

alexruizlul

Si a alguien no le funciona la extensión de IntelliSense en VSC es porque están dejando que VSC les autocomplete la palabra class. Para que funcione correctamente, ustedes deben de escribir completamente la palabra class. Desconozco la razón por la que pasa esto, pero esta es la solución que me ha funcionado a mi.

Miguel Angel

No me funcionan las clases

Kevin Brayan Luna Figueroa

Que plugin utiliza el profesor para que el hexadecimal se pinte de color?

Aarón Fabricio Santa Cruz Valdez

ohhh que interesante. Quisa empiece a usar tailwind en lugar de bootstrap.

Kevin Parra Lopez

Buff Me entusiasme con esto

Jimmy Buriticá Londoño

Ya empezamos a usar Tailwind, espero sea lo que he estado esperando.

Jose Morales Varon

Como dato: el pluggin de VS CODE que permite previsualizar los colores es Color Highlight. Espero que les sea de utilidad

Sergio Esteban Diaz Guerrero

Chicos, alguno de usds sabe como se llama la extensión de visual que me permite ver los colores sobre el héxagesimal ? me parecería genial tenerla 😃

Andres Felipe Rodriguez Hernandez

Esto está muy poderoso, copiando simplemente carpetas y archivos a un nuevo proyecto puedo usar tailwind? o siempre necesitaría hacer la instalación desde consola?

Miguel Ángel Reyes Moreno

<h4>Colores</h4>

Elementos a los que se les puede cambiar color:

Fondo
Texto
Bordes
Placeholder

Bueno, se ve interesante este Framework, me está gustando

Mauricio Combariza

A mi no me funcionaba la parte de autoprefixer y cuando puse f1 autoprefixer run. Me mostro que no tenia instalados los lenguajes css, por lo que los instale y ahi si sirvio

Naldo Duran

Sergio Esteban Diaz Guerrero