Generador de paleta Tailwind
Genereu una configuració de color Tailwind CSS personalitzada amb una escala completa de matisos del 50 al 900 i copieu el codi directament al vostre projecte.
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: {
50: '#F2F2FD',
100: '#E4E5FB',
200: '#BFC0F8',
300: '#9395F6',
400: '#5B5EF5',
500: '#1418EB',
600: '#0C0FC6',
700: '#0508AD',
800: '#010389',
900: '#010265',
950: '#000133',
},
},
},
},
}Genereu una configuració de color Tailwind CSS personalitzada amb una escala completa de matisos del 50 al 900 i copieu el codi directament al vostre projecte.
Generador de paleta Tailwind mostra només els controls i resultats corresponents a la seva funció. Les opcions disponibles depenen de l’eina i de l’entrada.
Formats compatibles
Com funciona
Pas 1
Obriu Generador de paleta Tailwind i prepareu l’entrada que demana la interfície
Pas 2
Ajusteu els controls visibles segons el resultat que necessiteu
Pas 3
Reviseu el resultat abans de copiar-lo, exportar-lo o reutilitzar-lo
Errors comuns a evitar
- No doneu per compatible un format o una opció que no aparegui a la interfície.
- Comproveu els valors abans de reutilitzar-los en una identitat, interfície o fitxer final.
- Si el resultat s’utilitza en text o UI, reviseu també el contrast.
Consells pro
- Conserveu el valor d’origen amb el resultat per comparar variants.
- Feu servir els formats que l’eina mostra realment en lloc d’estimar conversions.
- En mòbil i tauleta, permeteu que textos i controls saltin de línia.
Tractament de dades
El tractament depèn de la funció utilitzada. El consentiment, l’analítica i les funcions de compte del lloc són separats de l’operació de color.
Què fa aquesta eina
Genereu una configuració de color Tailwind CSS personalitzada amb una escala completa de matisos del 50 al 900 i copieu el codi directament al vostre projecte. Generador de paleta Tailwind es concentra en aquesta tasca i no pressuposa funcions que no es mostren a la interfície. Utilitzeu els controls disponibles per obtenir el resultat que necessiteu i comproveu els valors mostrats abans de portar-los a una altra eina, full d’estils, fitxer de disseny o document.
Preparar una entrada adequada
Comenceu amb l’entrada que demana Generador de paleta Tailwind: color, valor, imatge o ajust segons la pantalla. Els formats indicats en aquesta pàgina són Tailwind, CSS, SCSS, JSON. Si un format o una opció no apareix a la interfície, no el considereu compatible amb aquesta funció concreta.
Llegir i verificar el resultat
Llegiu el resultat dins del context de l’operació realitzada. Compareu-lo amb el valor d’origen i reviseu els controls que han influït en el càlcul. Per a treballs visuals importants, comproveu també el resultat a la interfície real on s’utilitzarà i no només a partir del codi.
Ús en mòbil i tauleta
Generador de paleta Tailwind utilitza el disseny responsive del lloc. Títols, subtítols, breadcrumbs i controls poden saltar de línia en pantalles estretes per evitar tallar traduccions llargues. Tot i així, reviseu el resultat final al dispositiu i al context on el fareu servir.
Reutilitzar el resultat al projecte
Després de verificar el resultat, utilitzeu només les accions que Generador de paleta Tailwind ofereix realment, com copiar o exportar quan estiguin disponibles. Conserveu el valor d’origen si heu de reproduir l’ajust i, en interfícies, documenteu també el paper del color i el contrast necessari.
Eines relacionades
Guies i tutorials
Aprèn a utilitzar les nostres eines amb les nostres guies detallades.
tailwind-palette: guia pràctica de developer
Guia localitzada per utilitzar tailwind-palette, entendre bones pràctiques de developer i evitar errors comuns.
tailwind-palette: guia pràctica de developer
Guia localitzada per utilitzar tailwind-palette, entendre bones pràctiques de developer i evitar errors comuns.
tailwind-palette: guia pràctica de developer
Guia localitzada per utilitzar tailwind-palette, entendre bones pràctiques de developer i evitar errors comuns.
Preguntes freqüents
Aprèn a utilitzar les nostres eines amb les nostres guies detallades.