Puede agregar fácilmente nuevos colores a Tailwind CSS y conservar los originales mediante la configuración de personalización. Puede configurar sus colores bajo la clave de colores en la sección de temas de su archivo tailwind.config.js .
Siga el paso a continuación para agregar el archivo tailwind.config.js en su carpeta.
Paso 1: Ejecute el siguiente código en el terminal de su carpeta. Esto creará un archivo package.json .
npm init
Paso 2: Copie y pegue el siguiente código en el terminal de su carpeta. Esto creará el módulo de Node necesario para el viento de cola.
npm install tailwindcss@latest postcss@latest autoprefixer@latest
Paso 3: Cree una carpeta pública y agregue index.html, style.css y tailwind.css dentro de la carpeta pública.
Paso 4: agregue el siguiente código en el archivo tailwind.css . Con este archivo, puede personalizar su CSS de viento de cola junto con el estilo predeterminado. Tailwind intercambiará estas directivas en el momento de la compilación con todos los estilos que genera en función de su sistema de diseño configurado.
@tailwind base; @tailwind components; @tailwind utilities;
Paso 5: Abra el archivo package.json y, en la sección de scripts, agregue el siguiente código
“scripts”: {
“build:css”: “tailwind build public/tailwind.css -o public/style.css”
},
Paso 6: Ejecute el siguiente código en la terminal. Esto llenará su archivo style.css con el código CSS de Tailwind predefinido.
npm run build:css
Paso 7: Finalmente, ejecute el siguiente código. Esto generará un archivo de configuración de Tailwind para su proyecto utilizando la utilidad Tailwind CLI incluida en el momento de la instalación del paquete tailwindcss npm.
npx tailwindcss init
Sintaxis:
colors: {
// each color has a specific name. you can replace
// 'custom-color' with the name you like
// replace '#66bbfa' with the colors you like.
'custom-color': '#66bbfa'
}
Agregue el siguiente código a su archivo tailwind.config.js y ahora puede personalizar su color agregando su propio código de color.
tailwind.config.js
const colors = require('tailwindcss/colors')
module.exports = {
mode: 'jit',
theme: {
extend: {
colors: {
// Configure your color palette here
'custom-green':'#66bb6a',
},
},
},
variants: {},
plugins: [],
}
Ejemplo :
HTML
<!DOCTYPE html> <html> <body class="text-center mx-4 space-y-2"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Customize colors</b> <div class="h-60 w-25 m-5 bg-custom-green"> GEEKSFORGeeks </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA