r/tailwindcss

For an ai tool that advertises itself as never producing ai slop, it is remarkably good at producing ai slop. Worst $22 i have ever spent. Period! Was hoping this would atleast help me with basic layout ideas etc , but oh boy was i wrong. It delivers the exact same ai crap as all the other ai tools. Sigh...

Since 2021, I've been working in the React ecosystem, from classic React, through the dead Gatsby, to NextJS, which I adore. I like many things about this framework, but for the past month I've been having a love affair with Astro – many things have won me over, such as routing and the tool's lightweight nature. Unfortunately, I often feel confused by the differences between Astro and NextJS, and I realize that this is a matter of familiarity with standard JavaScript.

The same applies to styling websites and web applications. I've been working with CSS since 2016, and since the release of TailwindCSS v4. CSS development has accelerated rapidly recently, with the addition of many revolutionary features.

Questions:

1. When should I use NextJS and when should I use Astro in the context of websites, considering that I'll be using a lot of query templates, a search engine, filtering, a multi-stage form, and animations from GSAP?
2. If I'm more comfortable in the React/NextJS ecosystem, is it worth switching to AstroJS?
3. What are your pro tips for TailwindCSS, especially custom breakpoints and font size?
4. How do I combine modern CSS with TailwindCSS?

Hello,

I am posting this on behalf of my 11-year-old son who is very passionate about web design and coding. Recently he started learning Tailwind CSS, and asked me to post the following question to the community:

How can I create a modern Tailwind CSS navbar? I looked at the Tailwind CSS showcase and was inspired by navbars like the ones there. Are there any tips or tricks to create a modern looking navbar? I also would appreciate any links you think would be helpful resources for answering this question.

Every time I start a new React dashboard I lose a solid 20–30 minutes before I've

written a single line of actual UI: installing libraries, wiring the theme, setting

up auth/RBAC, getting forms to behave. It's the least fun part and it's basically

the same every project.

Curious how others deal with it:

- A personal starter/boilerplate you clone?

- A generator/CLI?

- Copy-paste from the last project?

- Or just eat the setup cost every time?

And roughly how long does it take you to go from "empty folder" to "something

running on screen"?

(For context: I got tired enough of it that I built a small CLI that scaffolds a

working admin template — RBAC + forms included — in one command. Happy to share if

it's useful, but mostly I'm curious how everyone else handles the setup tax.)

i have downloaded a template written with tailwind 3 and i am trying to change it to tailwind 4.3.3 and customize it .

trying to simplify header class but i just cant get the responsive classes to work with apply

 <header class="max-w-lg:px-4 max-w-lg:mr-auto absolute top-0 z-20 flex h-15 w-full bg-opacity-0 px-[5%] lg:justify-around">

@import "tailwindcss";

@theme {
  --font-1: "Chewy", sans-serif;
  --font-2: "Nunito", sans-serif;
}

body {
  @apply flex min-h-screen flex-col bg-black text-white font-1;
}

header {
 @apply  absolute top-0 z-20 flex h-15 w-full bg-opacity-0 px-[5%];

 @variant  max-w-lg {
   @apply  px-4 mr-auto;
  }

  @variant lg {
  @apply  justify-around;
  }
}

what am i doing wrong. theme and body works fine

Hey everyone! 👋

I wanted to share a project I've been working on—a modern, responsive HTML5 website template. While it's set up for restaurants and coffee shops, it's 100% flexible and easily adaptable for fashion stores, makeup & skincare brands, or any other business with a simple text edit!

I also included a clear guide inside so anyone can set it up without complex setups.

Links are in the comments below! 👇

Hi everyone!

I recently built a small TypeScript utility to make responsive Tailwind classes a bit easier to organize, and I'd love to get some feedback from people who use Tailwind regularly.

One thing that always bothered me was having long className strings full of responsive utilities:

<div className="flex flex-col gap-4 md:flex-row lg:gap-8 xl:items-center ...">

So I created responsive-tailwind, which lets you write the same thing like this:

<div
  className={responsive({
    base: "flex flex-col gap-4",
    md: "md:flex-row",
    lg: "lg:gap-8",
    xl: "xl:items-center",
  })}
/>

The library also validates breakpoint prefixes at compile time, so something like this:

responsive({
  md: "flex-row",
})

will produce a TypeScript error instead of silently passing through.

It supports the default Tailwind breakpoints as well as arbitrary ones like min-[900px] and max-[768px], while preserving Tailwind's static class detection.

This is my first npm package, so I'd really appreciate any feedback, ideas, or criticism.

npm: https://www.npmjs.com/package/responsive-tailwind

GitHub: https://github.com/babyreptile/responsive-tailwind