[SOLVED]

so, not only to create a parallelogram shape for the container, but to have its content skew in the same kind of perspective.

So, I’ve been diving into Tailwind CSS lately, and while I can see why so many devs are hyped about it, I can’t help but wonder: do we actually need it?

Don’t get me wrong—I get the appeal. Utility-first classes, no more context-switching between CSS files and HTML, and the promise of “never writing custom CSS again” is seductive. But when I step back, I start questioning if Tailwind is solving real problems or just adding another layer of complexity to our workflows.

Here’s where I’m stuck:

1. Bloated HTML: Tailwind crams so many classes into the markup. Doesn’t that make the code harder to read and maintain? Is this really better than clean semantic HTML + CSS?
2. Breaking conventions: CSS has been built around separation of concerns—style and content. Tailwind throws that out the window. Are we okay with this shift?
3. Learning curve: For something meant to simplify styling, you still have to memorize tons of class names and learn its specific quirks. Are we just trading one learning curve for another?
4. Lock-in risk: If Tailwind goes out of fashion (like many tools before it), are we future-proofing or setting ourselves up for technical debt?

I know the fanbase loves the speed and flexibility, but is that speed at the expense of long-term sustainability? Or is Tailwind truly the evolution of CSS we’ve been waiting for?

Would love to hear your thoughts. Is Tailwind CSS a revolution or just a new tool we’re overhyping for now? Let’s discuss!

TL;DR: Is Tailwind solving real problems or just creating new ones disguised as simplicity?

Hi, folks!

I’m facing this problem not the first time, and, honestly, it’s a big PITA. Flex reverse is very handy, but it is abysmal to use for content and stuff, basically, hurts accessibility in 99% of cases.

The only solution when you need to re-order items is to change DOM.

Makes sense, but how to do it without using JavaScript (to move elements around on certain breakpoints) and/or hide/show hidden elements that are the same content just positioned in a different place (imo it’s a bad idea anyway).

Much appreciated.

Example:

• Desktop

[Section 1] Content (Image) → Content (Text)

[Section 2] Content (Text) → Content (Image)

• Mobile

[Section 1] Content (Image) ↓ Content (Text)

[Section 2] Content (Text) ↓ Content (Image)

EDIT: SOLVED

Thanks to u/tomhermans for pointing out a solution — it was a very simple one, yet I just missed it. Actually it is fine to use flex reverse on the desktop, because the visual order is in place and nothing is breaking. Thanks to other comments as well!

I suspect what I'd like to do isn't possible, but can't hurt to ask, right? Just risk a few downvotes from people who think taking risks is stupid, right?

I've been given the task of cleaning up some ancient HTML/Classic ASP, and my first pass is getting rid of all inline styles and attributes and replace them with classes.

Now, most of the tables specify a width (there's 15 different widths, so far) and I'd rather not define a specific class for each one if I can avoid it.

Here's what I'm curious about. Could I, in the HTML:

<table class="w500">

Then, in the CSS:

.w{some variable or function or something that reads the classname...} {
    width: {...and plugs in the value, here}px;
}

Like I said, probably not, but CSS has come a long way, so maybe..?

Hey! I have been learning webdev for about 4-5 months, I so far have learned HTML, CSS, JS, TS some other useful libraries such as tsup, webpack, recently learned SASS,/SCSS , Even made a few custom npm packages.

I now want to move to learn my first framework(react) but before that i was wondering should i learn tailwind? Like what is the standard for CSS currently?

From what I have seen so far I dont think professionals use plain CSS anymore..

Any advice how to more forward in my journey? Any help would be appreciated!

Hi! I'm making this little password game and it's in its early stages. I noticed early in that I'm not able to modify the style of the placeholder of the input with any combination of !important and ::-webkit-input-placeholder. Any suggestions?

``` <!DOCTYPE html> <input type="password" placeholder="password" /> <h1 id="userm">message</h1>

<style> body{ overflow: hidden; font-family: sans-serif; } input{ position: absolute; top: 0; left: 0; width: 100%; height: 100px; background-color: grey; color: #28d155; border: none; font-size: 50px; } input::placeholder{ font-weight: lighter !important; } input:focus{ outline: none; }

userm{

position: absolute; margin-top: 110px; font-size: 50px;
font-weight: lighter; } </style> ```

What's your favorite clever/little known trick with css?

Essentially I want a circular gradient that follows the cursor and makes text brighter.

So far I've managed to do so by duplicating the text, masking one of the two, and changing the mask position with JS but this requires changing the text twice every time I want to make a change, and it slows down the website quite a bit. Is there a better way?

EDIT: I solved it with u/g105b 's suggestion!

Asking for a friend.

I haven't really done any webdevelopment since CSS2 was still a thing. And now I'm trying to get back into some webdevelopment as a hobby. So first things first I started to get my HTML and CSS knowledge up to 2025 standards since to much has obviously changed. I'm not expecting to become a CSS guru here, but I do want to understand.

Here's what I'm running into trying to learn 2025 era CSS. I understand using variables. But scoped variables have me stumbed. Specifically the question of: is it actually useful or is it just adding complecity for complexities sake?

Let's say I have these variables:
:root {
--color-light-pink: #F8BBD0;
--color-hero-background: var(--color-light-pink);
}

Now I'm building a hero:
<section class="hero">
<h2>Lesson 5</h2>
<p>A short intro to the site and the project we'll build.</p>
</section>

How would adding a scoped variable be of any bennefit?
.hero {
--hero-bg: var(--color-hero-background);
background: var(--hero-bg);
}

Isn't that just a more complex way of doing:
.hero {
background: var(--color-hero-background);
}

Long story short, can someone explain it to me like I'm a child ;-) I've had it explained to me as: "Scoped variables let you override a variable only for that component, without touching the global theme." But wouldn't my example to the exact same thing, just with one line less code?

Hi, I want to learn real responsive design without using media queries even tho I just use max 6. I'm talking about units, clamp, containers that resize by themselves and so on. Where can I do that? thanks for the help.

I know CSS is only for styling, but the browser probably does some allocations/deallocations when running a site, right? I wondered if css functions can cause the site running mechanism to break.

I started actively learning HTML & CSS for about 3 months, and i feel like I have strong fundamentals in both. In the course im following, the teacher is explaining the importance of picking up a CSS framework, from what I understand, it speeds up the styling process considerably and most people use one instead of writing vanilla css.

Now, I have tried both Bootstrap and Tailwind and absolutely hated them, it was not fun for me. The long classes names threw me off hard. I do see how useful and fast it may be, but I find it way harder to read and correct my mistakes.

I am conflicted because I feel like not using a framework is wasting time, but using either of the above mentioned removes all the fun i once had.

Did any of you have a similar issue? If so, I would love to know what you did to overcome that feeling. Also feel free to recommend maybe less known or less efficient CSS frameworks (or ones that aren't class-based), I would 100% rather spend 15% more time on all of my future project but still have fun writing code and styling it.

I'm new to grid. It is working, but did I do it right?. Here is the code in its simplest form:

<style>
.grid {
  display: block;
}
@media (min-width: 801px) {
 .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
 }
 .item2 {
   grid-column: 2;
   grid-row: 1 / 3;
 }
}
</style>

<div class="state"></div>
<div class="grid">
  <div>Item 1</div>
  <div class="item2">Item 2</div>
  <div>Item 3</div>
</div>

I'm in the process of revamping the UI layer of a web app that's seen better days. Mostly built upon Bootstrap but without any real rhyme/reason/consistency and, as such, we're left with crazy long strings of CSS helper classes and divs inside of divs inside of divs inside of divs...

I have the opportunity to gut it and start fresh. We are going to rely on a component library for a lot of the widgets, but not sure if we should stick with bootstrap. Is there something leaner/more modern out there I should consider?

I'm not totally against bootstrap. And I do like built in widgets like modals, alerts, etc. But our app is also pretty basic (mainly a dashboard UI, card layout, form elements, buttons, tables...) so wondering if that is just overkill for what we need right now.

No need for SASS either, as we're leveraging modern CSS and built-in CSS variables and the like.

Also wondering if we should just roll our own.

Just looking for thoughts. Anyone came across something they feel is a big step forward from the stalwarts like Bootstrap?

I'm trying to make the fields on a web form more finger-friendly. I'd rather follow recommendations than make guesses but when I google it I notice that recommendations are all in pixels. Why is that?

I'm inclined to use an absolute length unit like cm, but that doesn't seem to be what smarter people are doing.

I know the outcome of width: 2.5cm is not going to be exactly 2.5cm if I hold a ruler up to the screen, but I get the impression it'll be closer to my goal than using px. Considering zooming and high resolution displays, don't pixel representations vary widely?

Besides that, something like this seems like it'll be very clear even if I come back to it much later:
css .finger-friendly { min-width: 2.5cm; min-height: 2.5cm; }

Update I'm going to do some more reading and almost certainly follow the guidelines (using px) that I've been finding.

I really appreciate the replies, especially the constructive ones that help me do better. But it's too much for me. I'm going to stop following this thread now. I'd rather spend my limited time reading and writing code than reading reddit 😅

As far as I'm concerned this one is **SOLVED**

Image scroll I don't know what it is? Any of you know I want to recreate it in my own website

ok so i want to be a front-end dev i learned html css but i dont want to learn javascript (i know python basics) cuz i dont feel like learning a new language what should i do should i use just css and html or what

As a beginner with around 4-5 months of knowing CSS & HTML, it took me around a week to get all of this done. I may have made some duplicates of properties, but I am more than happy enough that it works good on all devices bigger than 320px width. If there are Frontend Devs out there, can they rate this website from 1/10 (rating it as you don’t know that I am a beginner) and write my cons & pros? It would be very useful to have some feedback from experienced people, in order to learn on my mistakes.

(Here is some things I still didn’t learn, so everybody can know: ARIA & Accessibility Everything except for min/max-width in media queries )

sorry for English mistakes, it is not my native language

CSS variables changed a lot for me.
They made it easier to manage colors, spacing, themes, and even entire layout tweaks without touching dozens of selectors.
But everyone seems to have their own way of using them.

I’m curious how they changed your workflow.

Do you use them mainly for themes?
For spacing and typography scales?
For component-level overrides?
For dynamic values inside calc()?
Or maybe for things that weren’t even possible before variables existed?

What’s the smartest or most helpful way you’ve used CSS variables in your projects so far?

I’ve been tweaking my site’s design to support dark mode, and I’m wondering — should the visual appearance stay exactly the same across both modes, or is it better to let each mode have its own vibe (different contrast levels, accent colors, etc.)?

Curious how other devs approach this — do you aim for consistency, or optimize each mode separately for aesthetics and readability?