Porting vanilla CSS bubble to Tailwind
#webdev #css #tailwind
- 3 minutes read - 500 words
I started exploring Tailwind CSS and decided to port one of my favorite CSS codepen in it. I wanted to see what the learning curve looks like and how tailwind actually helps in code management and future maintenance.
The Code repo and stackblitz links:
- https://github.com/ranuzz/tailwind-css-bubble-port
- https://stackblitz.com/github/ranuzz/tailwind-css-bubble-port
The component I picked is an animated CSS sphere that looks like a bubble. The whole process with progression is explained in this post https://cssanimation.rocks/spheres/
The codepen for the version that I’m panning to port.
https://codepen.io/donovanh/pen/nRgZjd
See the Pen Spheres tutorial: 6 Bubble (animated) by Donovan Hutchinson (@donovanh) on CodePen.
The CSS in this codepen is pretty clean and but the individual attributes of the component definition are not sharable. Like background color gradients, transforms etc. Tailwind being a utility library makes this process seamless. I was able to replicate most of it using base utility classes and the rest I extended using external plugins and custom components. The final CSS file looks pretty clean and uses building block utility classes to achieve the final result.
.stage {
@apply m-auto w-[200px] h-[200px]
}
.ball {
@apply block relative rounded-full w-full
h-full bg-radial-circle-b-blue-shades-with-stops
before:content-[''] before:absolute before:w-[90%]
before:h-[90%] before:rounded-full
before:top-1 before:left-2
before:bg-radial-circle-none-custom-one-white-with-stops
before:z-10 before:blur-md
after:content-[''] after:absolute after:hidden
after:top-2 after:left-5
after:w-[80%] after:h-[80%] after:rounded-full
after:z-10 after:blur-sm after:rotate-45
}
.bubble {
@apply animate-bubble-anim
bg-radial-circle-none-custom-two-bubble-with-stops
before:blur-xl before:h-[80%] before:w-[40%]
before:translate-x-[131%]
before:translate-y-[58%]
before:rotate-12
before:bg-radial-circle-none-bubble-before-with-stops
after:block after:bg-radial-circle-none-custom-three-bubble-after-with-stops
}
Behind the scene I’m using https://github.com/benface/tailwindcss-gradients
for radial gradient and the extended tailwind looks like this.
module.exports = {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
radialGradientShapes: { // defaults to this value
'default': 'ellipse',
'circle': 'circle',
},
radialGradientSizes: { // defaults to this value
'default': 'closest-side',
'none': '',
},
radialGradientPositions: { // defaults to these values
'default': 'center',
't': 'top',
'tr': 'top right',
'r': 'right',
'br': 'bottom right',
'b': 'bottom',
'bl': 'bottom left',
'l': 'left',
'tl': 'top left',
'custom-one': '50% 0px',
'custom-two': '50% 55%',
'custom-three': '50% 80%',
'custom-four': '130% 130%',
},
radialGradientColors: { // defaults to {}
'red': '#f00',
'black-white-with-stops': ['#000', '#000 45%', '#fff 55%', '#fff'],
'blue-shades-with-stops': [
'#81e8f6', '#76deef 10%', '#055194 80%', '#062745 100%',
],
'white-with-stops': ['#ffffff', 'rgba(255, 255, 255, 0) 58%'],
'bubble-with-stops': [
'rgba(240, 245, 255, 0.9)',
'rgba(240, 245, 255, 0.9) 40%',
'rgba(225, 238, 255, 0.8) 60%',
'rgba(43, 130, 255, 0.4)',
],
'bubble-after-with-stops': [
'rgba(255, 255, 255, 0)',
'rgba(255, 255, 255, 0) 74%',
'white 80%, white 84%',
'rgba(255, 255, 255, 0) 100%',
],
'bubble-before-with-stops': [
'rgba(255, 255, 255, 0) 0',
'rgba(255, 255, 255, 0) 46%',
'rgba(255, 255, 255, 0.8) 50%',
'rgba(255, 255, 255, 0.8) 58%',
'rgba(255, 255, 255, 0) 60%',
'rgba(255, 255, 255, 0) 100%',
],
},
extend: {
animation: {
'bubble-anim': 'bubble-keyframes 2s ease-out infinite',
},
keyframes: {
'bubble-keyframes': {
'0%': {transform: 'scale(1)'},
'20%': {transform: 'scaleY(0.95) scaleX(1.05)'},
'48%': {transform: 'scaleY(1.1) scaleX(0.9)'},
'68%': {transform: 'scaleY(0.98) scaleX(1.02)'},
'80%': {transform: 'scaleY(1.02) scaleX(0.98)'},
'97%, 100%': {transform: 'scale(1)'},
},
},
},
},
plugins: [
require('tailwindcss-gradients'),
],
};
The complexity is hidden in the tailwind config file but, IMO, it is much more manageable than vanilla CSS. Tailwind documentation and plugin ecosystem was a huge help in this port.