Adding Radial Gradients to Tailwind CSS

This content originally appeared on DEV Community and was authored by Mark Mead

Recently, I added radial gradient classes to Hypercolor. This is currently not something Tailwind CSS supports and it's unlikely it ever will.

However, to add radial gradient classes into Tailwind CSS is very easy so don't worry.

Simply add the following to your tailwind.config.js file:

backgroundImage: { 
  'gradient-radial': 'radial-gradient(ellipse at center, var(--tw-gradient-stops))', 
  'gradient-radial-at-t': 'radial-gradient(ellipse at top, var(--tw-gradient-stops))', 
  'gradient-radial-at-b': 'radial-gradient(ellipse at bottom, var(--tw-gradient-stops))', 
  'gradient-radial-at-l': 'radial-gradient(ellipse at left, var(--tw-gradient-stops))', 
  'gradient-radial-at-r': 'radial-gradient(ellipse at right, var(--tw-gradient-stops))', 
  'gradient-radial-at-tl': 'radial-gradient(ellipse at top left, var(--tw-gradient-stops))', 
  'gradient-radial-at-tr': 'radial-gradient(ellipse at top right, var(--tw-gradient-stops))', 
  'gradient-radial-at-bl': 'radial-gradient(ellipse at bottom left, var(--tw-gradient-stops))', 
  'gradient-radial-at-br': 'radial-gradient(ellipse at bottom right, var(--tw-gradient-stops))', 
},

This will allow you to write classes like bg-gradient-radial-at-l from-fuchsia-300 via-green-400 to-rose-700, it's hard to tell if that would look awful or amazing, so I recommend using the gradient generator on Hypercolor to see what works and what doesn't.

This content originally appeared on DEV Community and was authored by Mark Mead

Print Share Comment Cite Upload Translate Updates

APA

Mark Mead | Sciencx (2021-11-10T18:52:42+00:00) Adding Radial Gradients to Tailwind CSS. Retrieved from https://www.scien.cx/2021/11/10/adding-radial-gradients-to-tailwind-css/

MLA

" » Adding Radial Gradients to Tailwind CSS." Mark Mead | Sciencx - Wednesday November 10, 2021, https://www.scien.cx/2021/11/10/adding-radial-gradients-to-tailwind-css/

HARVARD

Mark Mead | Sciencx Wednesday November 10, 2021 » Adding Radial Gradients to Tailwind CSS., viewed ,<https://www.scien.cx/2021/11/10/adding-radial-gradients-to-tailwind-css/>

VANCOUVER

Mark Mead | Sciencx - » Adding Radial Gradients to Tailwind CSS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/11/10/adding-radial-gradients-to-tailwind-css/

CHICAGO

" » Adding Radial Gradients to Tailwind CSS." Mark Mead | Sciencx - Accessed . https://www.scien.cx/2021/11/10/adding-radial-gradients-to-tailwind-css/

IEEE

" » Adding Radial Gradients to Tailwind CSS." Mark Mead | Sciencx [Online]. Available: https://www.scien.cx/2021/11/10/adding-radial-gradients-to-tailwind-css/. [Accessed: ]

rf:citation

» Adding Radial Gradients to Tailwind CSS | Mark Mead | Sciencx | https://www.scien.cx/2021/11/10/adding-radial-gradients-to-tailwind-css/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts