Menambahkan Custom Color pada Tailwind

Mengambahkan variant warna baru pada project Tailwind selain default color yang disediakan

Code snippet ini khusus dipergunakan untuk project Tailwind berbasis npm. Secara default, Tailwind telah menyediakan color pallete yang dapat anda lihat di halaman https://tailwindcss.com/docs/customizing-colors. Namun apabila anda ingin menambahkan warna lainnya, dapat anda lakukan dengan menambahkan configurasi pada file tailwind.config.js.

module.exports = {
	purge: [],
	theme: {},
	variants: {
		extend: {
			colors: {
			/* new color: gold variant */
				gold: {
					light  : '#DBC579',
					DEFAULT: '#BD9618',
					dark   : '#342200',
				}

			}
		},
	},
	plugins: [],
}

Apabila dicompile, class warna tambahan anda akan menjadi bg-gold, bg-gold-light, dan bg-gold-dark. Berlaku juga untuk text color yaitu text-gold, text-gold-light, dan text-gold-dark.


Saya bisa membuatkan anda Aplikasi berkualitas

© 2021 Adisparta. All rights reserved.