Gradient color stops

[ben-rogerson]

This feature adds support for gradient color stops released in Tailwind v1.7.0

Colors can be adjusted under the config key gradientColorStops or fallback on colors.

Usage:

import tw from 'twin.macro'

const Styled = tw.div`bg-gradient-to-b from-purple-400 to-blue-500`
// or
const TwProp = <div tw="bg-gradient-to-b from-purple-400 to-blue-500" />

View the new classes

tw`bg-gradient-to-t`
tw`bg-gradient-to-tr`
tw`bg-gradient-to-r`
tw`bg-gradient-to-br`
tw`bg-gradient-to-b`
tw`bg-gradient-to-bl`
tw`bg-gradient-to-l`
tw`bg-gradient-to-tl`

tw`from-transparent`
tw`from-current`
tw`from-black`
tw`from-white`
tw`from-gray-100`
tw`from-gray-200`
tw`from-gray-300`
tw`from-gray-400`
tw`from-gray-500`
tw`from-gray-600`
tw`from-gray-700`
tw`from-gray-800`
tw`from-gray-900`
tw`from-red-100`
tw`from-red-200`
tw`from-red-300`
tw`from-red-400`
tw`from-red-500`
tw`from-red-600`
tw`from-red-700`
tw`from-red-800`
tw`from-red-900`
tw`from-orange-100`
tw`from-orange-200`
tw`from-orange-300`
tw`from-orange-400`
tw`from-orange-500`
tw`from-orange-600`
tw`from-orange-700`
tw`from-orange-800`
tw`from-orange-900`
tw`from-yellow-100`
tw`from-yellow-200`
tw`from-yellow-300`
tw`from-yellow-400`
tw`from-yellow-500`
tw`from-yellow-600`
tw`from-yellow-700`
tw`from-yellow-800`
tw`from-yellow-900`
tw`from-green-100`
tw`from-green-200`
tw`from-green-300`
tw`from-green-400`
tw`from-green-500`
tw`from-green-600`
tw`from-green-700`
tw`from-green-800`
tw`from-green-900`
tw`from-teal-100`
tw`from-teal-200`
tw`from-teal-300`
tw`from-teal-400`
tw`from-teal-500`
tw`from-teal-600`
tw`from-teal-700`
tw`from-teal-800`
tw`from-teal-900`
tw`from-blue-100`
tw`from-blue-200`
tw`from-blue-300`
tw`from-blue-400`
tw`from-blue-500`
tw`from-blue-600`
tw`from-blue-700`
tw`from-blue-800`
tw`from-blue-900`
tw`from-indigo-100`
tw`from-indigo-200`
tw`from-indigo-300`
tw`from-indigo-400`
tw`from-indigo-500`
tw`from-indigo-600`
tw`from-indigo-700`
tw`from-indigo-800`
tw`from-indigo-900`
tw`from-purple-100`
tw`from-purple-200`
tw`from-purple-300`
tw`from-purple-400`
tw`from-purple-500`
tw`from-purple-600`
tw`from-purple-700`
tw`from-purple-800`
tw`from-purple-900`
tw`from-pink-100`
tw`from-pink-200`
tw`from-pink-300`
tw`from-pink-400`
tw`from-pink-500`
tw`from-pink-600`
tw`from-pink-700`
tw`from-pink-800`
tw`from-pink-900`

tw`via-transparent`
tw`via-current`
tw`via-black`
tw`via-white`
tw`via-gray-100`
tw`via-gray-200`
tw`via-gray-300`
tw`via-gray-400`
tw`via-gray-500`
tw`via-gray-600`
tw`via-gray-700`
tw`via-gray-800`
tw`via-gray-900`
tw`via-red-100`
tw`via-red-200`
tw`via-red-300`
tw`via-red-400`
tw`via-red-500`
tw`via-red-600`
tw`via-red-700`
tw`via-red-800`
tw`via-red-900`
tw`via-orange-100`
tw`via-orange-200`
tw`via-orange-300`
tw`via-orange-400`
tw`via-orange-500`
tw`via-orange-600`
tw`via-orange-700`
tw`via-orange-800`
tw`via-orange-900`
tw`via-yellow-100`
tw`via-yellow-200`
tw`via-yellow-300`
tw`via-yellow-400`
tw`via-yellow-500`
tw`via-yellow-600`
tw`via-yellow-700`
tw`via-yellow-800`
tw`via-yellow-900`
tw`via-green-100`
tw`via-green-200`
tw`via-green-300`
tw`via-green-400`
tw`via-green-500`
tw`via-green-600`
tw`via-green-700`
tw`via-green-800`
tw`via-green-900`
tw`via-teal-100`
tw`via-teal-200`
tw`via-teal-300`
tw`via-teal-400`
tw`via-teal-500`
tw`via-teal-600`
tw`via-teal-700`
tw`via-teal-800`
tw`via-teal-900`
tw`via-blue-100`
tw`via-blue-200`
tw`via-blue-300`
tw`via-blue-400`
tw`via-blue-500`
tw`via-blue-600`
tw`via-blue-700`
tw`via-blue-800`
tw`via-blue-900`
tw`via-indigo-100`
tw`via-indigo-200`
tw`via-indigo-300`
tw`via-indigo-400`
tw`via-indigo-500`
tw`via-indigo-600`
tw`via-indigo-700`
tw`via-indigo-800`
tw`via-indigo-900`
tw`via-purple-100`
tw`via-purple-200`
tw`via-purple-300`
tw`via-purple-400`
tw`via-purple-500`
tw`via-purple-600`
tw`via-purple-700`
tw`via-purple-800`
tw`via-purple-900`
tw`via-pink-100`
tw`via-pink-200`
tw`via-pink-300`
tw`via-pink-400`
tw`via-pink-500`
tw`via-pink-600`
tw`via-pink-700`
tw`via-pink-800`
tw`via-pink-900`

tw`to-transparent`
tw`to-current`
tw`to-black`
tw`to-white`
tw`to-gray-100`
tw`to-gray-200`
tw`to-gray-300`
tw`to-gray-400`
tw`to-gray-500`
tw`to-gray-600`
tw`to-gray-700`
tw`to-gray-800`
tw`to-gray-900`
tw`to-red-100`
tw`to-red-200`
tw`to-red-300`
tw`to-red-400`
tw`to-red-500`
tw`to-red-600`
tw`to-red-700`
tw`to-red-800`
tw`to-red-900`
tw`to-orange-100`
tw`to-orange-200`
tw`to-orange-300`
tw`to-orange-400`
tw`to-orange-500`
tw`to-orange-600`
tw`to-orange-700`
tw`to-orange-800`
tw`to-orange-900`
tw`to-yellow-100`
tw`to-yellow-200`
tw`to-yellow-300`
tw`to-yellow-400`
tw`to-yellow-500`
tw`to-yellow-600`
tw`to-yellow-700`
tw`to-yellow-800`
tw`to-yellow-900`
tw`to-green-100`
tw`to-green-200`
tw`to-green-300`
tw`to-green-400`
tw`to-green-500`
tw`to-green-600`
tw`to-green-700`
tw`to-green-800`
tw`to-green-900`
tw`to-teal-100`
tw`to-teal-200`
tw`to-teal-300`
tw`to-teal-400`
tw`to-teal-500`
tw`to-teal-600`
tw`to-teal-700`
tw`to-teal-800`
tw`to-teal-900`
tw`to-blue-100`
tw`to-blue-200`
tw`to-blue-300`
tw`to-blue-400`
tw`to-blue-500`
tw`to-blue-600`
tw`to-blue-700`
tw`to-blue-800`
tw`to-blue-900`
tw`to-indigo-100`
tw`to-indigo-200`
tw`to-indigo-300`
tw`to-indigo-400`
tw`to-indigo-500`
tw`to-indigo-600`
tw`to-indigo-700`
tw`to-indigo-800`
tw`to-indigo-900`
tw`to-purple-100`
tw`to-purple-200`
tw`to-purple-300`
tw`to-purple-400`
tw`to-purple-500`
tw`to-purple-600`
tw`to-purple-700`
tw`to-purple-800`
tw`to-purple-900`
tw`to-pink-100`
tw`to-pink-200`
tw`to-pink-300`
tw`to-pink-400`
tw`to-pink-500`
tw`to-pink-600`
tw`to-pink-700`
tw`to-pink-800`
tw`to-pink-900`