No tienes acceso a esta clase

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

Curso de Tailwind CSS 2020

Curso de Tailwind CSS 2020

V铆ctor Yoalli Dom铆nguez

V铆ctor Yoalli Dom铆nguez

Colores

6/29
Recursos

Aportes 42

Preguntas 11

Ordenar por:

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

Aqu铆 esta el linea para crear el archivo de configuraci贸n

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

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!

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

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

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

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'),
  ],
}

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!

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

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

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

//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">


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

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

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: [],
};

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.3Created Tailwind config file: tailwind.cong.full.js
  
tailwind_test %  

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

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

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铆:

Tailwind me est谩 resultando muy interesante, hasta aqu铆 mi percepci贸n es que es un Bootstrap pero mucho m谩s poderoso.

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

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 鈥渋鈥 es igual que poner 鈥渋nstall鈥)

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

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

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

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

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

href="./css/style.css"

Saludos!

npx tailwindcss init --full 

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

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

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 鈥渟in 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

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

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?

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

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

Alguien me puede ayudar con este error?

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

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.

No me funcionan las clases

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

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

Buff Me entusiasme con esto

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

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

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 馃槂

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?

<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

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

f

Y como un peque帽o comentario adicional, ahora el text-white no tiene degradaci贸n, as铆 que funciona solo con el text-white.