Nueva paleta de colores extendida

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

También se puede agregar colores arbitrarios sin necesidad de configurarlos manualmente.

<button class="bg-[#1da1f2] text-white ...">Share on Twitter</button>

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

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',
      // ...
    }
  }
}

Me gusta el curso, pero creo que hay algunos errores de concepto. Me imagino que es por la inexperiencia de Ana. Pero el curso esta bueno para aprender tailwind en unas horas. lo demas se aprende en aplicando sobre la marcha en el proyecto (de trabajo, o propio).

“Class” no es una palabra reservada para inicializar tailwind. eso hay que corregirlo en el curso.

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

Si nos damos cuenta el tamaño está fijado en REM (root element), y la relación va 4 a 1, es decir:

.
12rem - 48 → entonces 1rem es a 4 unidades (no sé si son pixeles).
.
Es una regla rápida para conocer tamaños y relaciones, creo que esto es inspirado en Shopify y su guía de diseño, donde establecen que las medidas basadas en el número 4 suelen ser más agradables y cónsonas a la vista.
.
Eso por cierto lo aprendí en un curso de @teffcode

Como concepto básico para entrarce al tailwind esta perfecto. Me cuesta un poco seguir a la profesora Ana. No se si es su primer curso que dio, pero bueno, todo es mejorable y experiencia adquirida. Y muchas cosas por afinar por parte de la profesora.

Floja la clase, todo se va a la documentación

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.

7. Nueva paleta de colores extendida

Tailwind PLAY

Este es un entorno en línea donde puedes interactuar con el código CSS y ver los resultados en tiempo real. Es una herramienta útil para experimentar con diferentes estilos y efectos, probar nuevas características y practicar habilidades en CSS sin tener que configurar un entorno local.
.
Todo aquí funciona exactamente igual que cuando ejecutas Tailwind localmente. Puedes personalizar tu archivo de configuración, usar características como @apply e incluso agregar complementos de terceros.
.
Ejemplo:

<div class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12">
  <img src="/img/beams.jpg" alt="" class="absolute top-1/2 left-1/2 max-w-none -translate-x-1/2 -translate-y-1/2" width="1308" />
  <div class="absolute inset-0 bg-[url(/img/grid.svg)] bg-center [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]"></div>
  <div class="relative bg-white px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10">
    <div class="mx-auto max-w-md">
      <img src="/img/logo.svg" class="h-6" alt="Tailwind Play" />
      <div class="divide-y divide-gray-300/50">
        <div class="space-y-6 py-8 text-base leading-7 text-gray-600">
          <p>An advanced online playground for Tailwind CSS, including support for things like:</p>
          <ul class="space-y-4">
            <li class="flex items-center">
              <svg class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="11" />
                <path d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill="none" />
              </svg>
              <p class="ml-4">
                Customizing your
                <code class="text-sm font-bold text-gray-900">tailwind.config.js</code> file
              </p>
            </li>
            <li class="flex items-center">
              <svg class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="11" />
                <path d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill="none" />
              </svg>
              <p class="ml-4">
                Extracting classes with
                <code class="text-sm font-bold text-gray-900">@apply</code>
              </p>
            </li>
            <li class="flex items-center">
              <svg class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="11" />
                <path d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill="none" />
              </svg>
              <p class="ml-4">Code completion with instant preview</p>
            </li>
          </ul>
          <p>Perfect for learning how the framework works, prototyping a new idea, or creating a demo to share online.</p>
        </div>
        <div class="pt-8 text-base font-semibold leading-7">
          <p class="text-gray-900">Want to dig deeper into Tailwind?</p>
          <p>
            <a href="https://tailwindcss.com/docs" class="text-sky-500 hover:text-sky-600">Read the docs &rarr;</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Resultado:

Prueba tailwind con Tailwind PLAY

.

Naming your colors

Tailwind utiliza nombres literales de colores (como rojo, verde, etc.) y una escala numérica (donde 50 es claro y 900 es oscuro) de forma predeterminada. Creemos que esta es la mejor opción para la mayoría de los proyectos, y hemos encontrado que es más fácil de mantener que el uso de nombres abstractos como primary o danger.
.
Dicho esto, en Tailwind puedes nombrar tus colores como quieras, y si estás trabajando en un proyecto que necesita admitir varios temas, por ejemplo, podría tener sentido usar nombres más abstractos:

tailwind.config.js

module.exports = {
  theme: {
    colors: {
      primary: '#5c6ac4',
      secondary: '#ecc94b',
      // ...
    }
  }
}

Puedes configurar esos colores explícitamente como hemos hecho anteriormente, o puedes tomar colores de nuestra paleta de colores predeterminada y crear alias para ellos:

tailwind.config.js

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      primary: colors.indigo,
      secondary: colors.yellow,
      neutral: colors.gray,
    }
  }
}

De nuevo, recomendamos mantenerse en la convención de nombres predeterminada para la mayoría de los proyectos y solo usar nombres abstractos si tienes una muy buena razón.

• Ver lo colores en la documentación: Default color palette
• Para nombrar los colores ver Naming your colors
• Paleta de colores de la versión 3.0 en un archivo figma
• Paleta de colores

Para la V3 de Tailwind - customizing colors

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

Es interesante para aplicar la teoría del color efectivamente en nuestras interfaces.

Gran variedad de colores tiene Tailwind.

Hola a todos, acá se puede ver la documentación de la paleta de colores para la versión 3.0. Además, están las instrucciones de cómo configurar tu propia paleta de colores, ya sea usando nuevos colores o usando alias con los colores que trae por defecto Tailwind. Saludos.

Para las personas que no saben que es POST, quizá esto ayude a entender más.
https://desarrolloweb.com/home/postcss

📝 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: {
‘blue’: ‘#1fb6ff’,
‘purple’: ‘#7e5bef’,
‘pink’: ‘#ff49db’,
‘orange’: ‘#ff7849’,
‘green’: ‘#13ce66’,
‘yellow’: ‘#ffc82c’,
‘gray-dark’: ‘#273444’,
‘gray’: ‘#8492a6’,
‘gray-light’: ‘#d3dce6’,
},
fontFamily: {
sans: [‘Graphik’, ‘sans-serif’],
serif: [‘Merriweather’, ‘serif’],
},
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.