I'm good with the slider.
I've been trying to reduce my js/css foot print. I'm slowly warming up to tailwind finally.
Guess we are going to disagree on these two things?
I'll give my two cents on both...
Sliders look to much like advertising.
A Notre Dame study showed sliders kill conversions and many studies since show that videos in headers also kill conversion.
However multiple case studies have shown that one big image increases conversions.
CrazyEgg said Dell, Saloman, and Kindercare all saw improvements after redesigning their sites to include hero images. Conversion Fanatics, said they saw a 40% increase in leads just by setting up the top image correctly.
Sliders also increase load times and have problems in mobile.
You’ve got milliseconds to convince someone that their life would be better, happier, and more productive if they just owned your car, in an area the size of a business card.
And recent studies have shown that user’s attention span’s on the decline.
So your hero image should focus on the main keyword of the page, clarify the offer, enhance the flow, nod at your CallToAction, show your benefits, answers some questions, and paint a picture that puts your customer in the center of it, playing the part of the hero.
It's difficult for a slider to do that...
And studies have shown, when done correctly ... this can increase conversions by as much as 40%.
Test have show sliders kill conversions
Are CSS frameworks like tailwind really better than vanilla CSS?
Tailwind produces a lot of DOM noise. I greatly prefer vanilla css over tailwind.
I don't like the Tailwind approach with all those classes.
I keep all my CSS tight and tiny.
It creates Unreadable and Bloated HTML!
Tailwind's utility-first approach leads to excessively long class lists, making HTML files cluttered and difficult to read or maintain, especially in larger projects.
Tailwind's reliance on utility classes can strip away semantic meaning from the code, as developers are forced to use shorthand class names (e.g., pt-0.5 for padding-top: 0.125rem), which can be harder to understand for teams or non-native English speakers.
Over time, projects using Tailwind can become harder to maintain as developers "tack on" utility classes to fix issues, leading to inconsistencies and deviations from design systems.
Tailwind's inline-class approach feels similar to writing CSS directly in <style> tags, which breaks the traditional separation of concerns between HTML and CSS. And Advanced CSS functionalities like specificity, pseudo-classes
hover, :focus), and complex selectors are often more cumbersome to implement in Tailwind compared to vanilla CSS.
And consider load times...
When comparing the load times of Vanilla CSS and Tailwind CSS!
Vanilla CSS
Smaller File Size: Vanilla CSS typically results in smaller file sizes because you write only the styles you need for your project. There is no additional overhead from unused utility classes or framework dependencies.
No Framework Dependency: By not relying on a framework, Vanilla CSS avoids the need to include external libraries or configurations, which can reduce initial load times.
Customization Efficiency: Developers can optimize their CSS by using variables, mixins (e.g., with SASS), or custom properties, ensuring that only essential styles are loaded.
Tailwind CSS
Framework Overhead: Tailwind introduces dependencies and configuration files, which can slightly increase complexity and load times compared to Vanilla CSS.
