Installation
- Run
npm i tailwind-color-palette or yarn add tailwind-color-palette. - Add
@import "~tailwind-color-palette/scss/tailwind-color-palette" to any .scss file.
gray
gray Background Color Utility Classes
.tw-bg-gray-100
.tw-bg-gray-200
.tw-bg-gray-300
.tw-bg-gray-400
.tw-bg-gray-500
.tw-bg-gray-600
.tw-bg-gray-700
.tw-bg-gray-800
.tw-bg-gray-900
gray Text Color Utility Classes
.tw-text-gray-100
.tw-text-gray-200
.tw-text-gray-300
.tw-text-gray-400
.tw-text-gray-500
.tw-text-gray-600
.tw-text-gray-700
.tw-text-gray-800
.tw-text-gray-900
red
red Background Color Utility Classes
.tw-bg-red-100
.tw-bg-red-200
.tw-bg-red-300
.tw-bg-red-400
.tw-bg-red-500
.tw-bg-red-600
.tw-bg-red-700
.tw-bg-red-800
.tw-bg-red-900
red Text Color Utility Classes
.tw-text-red-100
.tw-text-red-200
.tw-text-red-300
.tw-text-red-400
.tw-text-red-500
.tw-text-red-600
.tw-text-red-700
.tw-text-red-800
.tw-text-red-900
orange
orange Background Color Utility Classes
.tw-bg-orange-100
.tw-bg-orange-200
.tw-bg-orange-300
.tw-bg-orange-400
.tw-bg-orange-500
.tw-bg-orange-600
.tw-bg-orange-700
.tw-bg-orange-800
.tw-bg-orange-900
orange Text Color Utility Classes
.tw-text-orange-100
.tw-text-orange-200
.tw-text-orange-300
.tw-text-orange-400
.tw-text-orange-500
.tw-text-orange-600
.tw-text-orange-700
.tw-text-orange-800
.tw-text-orange-900
yellow
yellow Background Color Utility Classes
.tw-bg-yellow-100
.tw-bg-yellow-200
.tw-bg-yellow-300
.tw-bg-yellow-400
.tw-bg-yellow-500
.tw-bg-yellow-600
.tw-bg-yellow-700
.tw-bg-yellow-800
.tw-bg-yellow-900
yellow Text Color Utility Classes
.tw-text-yellow-100
.tw-text-yellow-200
.tw-text-yellow-300
.tw-text-yellow-400
.tw-text-yellow-500
.tw-text-yellow-600
.tw-text-yellow-700
.tw-text-yellow-800
.tw-text-yellow-900
green
green Background Color Utility Classes
.tw-bg-green-100
.tw-bg-green-200
.tw-bg-green-300
.tw-bg-green-400
.tw-bg-green-500
.tw-bg-green-600
.tw-bg-green-700
.tw-bg-green-800
.tw-bg-green-900
green Text Color Utility Classes
.tw-text-green-100
.tw-text-green-200
.tw-text-green-300
.tw-text-green-400
.tw-text-green-500
.tw-text-green-600
.tw-text-green-700
.tw-text-green-800
.tw-text-green-900
teal
teal Background Color Utility Classes
.tw-bg-teal-100
.tw-bg-teal-200
.tw-bg-teal-300
.tw-bg-teal-400
.tw-bg-teal-500
.tw-bg-teal-600
.tw-bg-teal-700
.tw-bg-teal-800
.tw-bg-teal-900
teal Text Color Utility Classes
.tw-text-teal-100
.tw-text-teal-200
.tw-text-teal-300
.tw-text-teal-400
.tw-text-teal-500
.tw-text-teal-600
.tw-text-teal-700
.tw-text-teal-800
.tw-text-teal-900
blue
blue Background Color Utility Classes
.tw-bg-blue-100
.tw-bg-blue-200
.tw-bg-blue-300
.tw-bg-blue-400
.tw-bg-blue-500
.tw-bg-blue-600
.tw-bg-blue-700
.tw-bg-blue-800
.tw-bg-blue-900
blue Text Color Utility Classes
.tw-text-blue-100
.tw-text-blue-200
.tw-text-blue-300
.tw-text-blue-400
.tw-text-blue-500
.tw-text-blue-600
.tw-text-blue-700
.tw-text-blue-800
.tw-text-blue-900
indigo
indigo Background Color Utility Classes
.tw-bg-indigo-100
.tw-bg-indigo-200
.tw-bg-indigo-300
.tw-bg-indigo-400
.tw-bg-indigo-500
.tw-bg-indigo-600
.tw-bg-indigo-700
.tw-bg-indigo-800
.tw-bg-indigo-900
indigo Text Color Utility Classes
.tw-text-indigo-100
.tw-text-indigo-200
.tw-text-indigo-300
.tw-text-indigo-400
.tw-text-indigo-500
.tw-text-indigo-600
.tw-text-indigo-700
.tw-text-indigo-800
.tw-text-indigo-900
purple
purple Background Color Utility Classes
.tw-bg-purple-100
.tw-bg-purple-200
.tw-bg-purple-300
.tw-bg-purple-400
.tw-bg-purple-500
.tw-bg-purple-600
.tw-bg-purple-700
.tw-bg-purple-800
.tw-bg-purple-900
purple Text Color Utility Classes
.tw-text-purple-100
.tw-text-purple-200
.tw-text-purple-300
.tw-text-purple-400
.tw-text-purple-500
.tw-text-purple-600
.tw-text-purple-700
.tw-text-purple-800
.tw-text-purple-900
pink
pink Background Color Utility Classes
.tw-bg-pink-100
.tw-bg-pink-200
.tw-bg-pink-300
.tw-bg-pink-400
.tw-bg-pink-500
.tw-bg-pink-600
.tw-bg-pink-700
.tw-bg-pink-800
.tw-bg-pink-900
pink Text Color Utility Classes
.tw-text-pink-100
.tw-text-pink-200
.tw-text-pink-300
.tw-text-pink-400
.tw-text-pink-500
.tw-text-pink-600
.tw-text-pink-700
.tw-text-pink-800
.tw-text-pink-900