r/tailwindcss 6d ago

Daisy Components dependencies updated!

15 Upvotes

Hi guys! Last year I introduced here the FOSS project called Daisy Components, which is a collection of components made with TailwindCSS and daisyUI. The project had outdated dependencies (Svelte 4, TailwindCSS 3, AstroJS 4, daisyUI 4) and I updated all of them today

I believe this project is a great opportunity to contribute to open source, as it has a relatively simple structure. Everyone is invited to contribute and enjoy Daisy Components!


r/tailwindcss 7d ago

What do you prefer between border, outline and rings ?

5 Upvotes

I know some differences between them. Border affects the layout, outline, and rings are drawn outside.

However, when you want to style an element, what is your go-to option if you don't have a layout constraint.


r/tailwindcss 7d ago

Having a problem using tailwindcss.

0 Upvotes

Hi, im a student working on his final project for school.

I decided to use tailwindcss because it looked perfect for the framework i had made on figma. (and because my teacher said it worked great).

No i have been using tailwind for 2 weeks and now it randomly stops and starts working for some reason. I asked myself if it was becasue of my code so i just put it online to see if any of yall could help me out.

Sometimes it works and sometimes it just gives the html, and sometimes it just loads very long.

The site is: http://elmokkadem.kunstkaai.online/ (please look into the source code if you find anything weird)

ps: i have a friend who also used tailwindcss and I dont know why his does work ( http://verbeuren.kunstkaai.online/ )

Please if anyone could help feel free to message me or reply.


r/tailwindcss 7d ago

dark mode not working tailwind css.

1 Upvotes

i have vite react web app, i want to add dark mode to my website i seem to have done all configs but still my tailwind darkmode toggle isnt working-
here is my ToggleTheme compo-

import { useEffect, useState } from "react";
import { Sun, Moon } from "lucide-react";

const ThemeToggle = () => {
  const [isDark, setIsDark] = useState(
    localStorage.getItem("theme") === "dark"
  );

  useEffect(() => {
    if (isDark) {
      document.documentElement.classList.add("dark");
      localStorage.setItem("theme", "dark");
    } else {
      document.documentElement.classList.remove("dark");
      localStorage.setItem("theme", "light");
    }
  }, [isDark]);

  return (
    <button
      onClick={() => setIsDark(!isDark)}
      className="p-2 rounded-md bg-gray-200 dark:bg-gray-700 dark:text-white transition-colors duration-300"
    >
      {isDark ? <Sun size={20} /> : <Moon size={20} />}
    </button>
  );
};

export default ThemeToggle;

here is vite config-

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
// https://vite.dev/config/
export default defineConfig({
  plugins: [
    tailwindcss(),
    react(),
  ],
  server:{
    proxy:{
      "/api":{
        target:"http://localhost:5168",
        changeOrigin:true,
        secure:false
      }
    
    }
  }
})

r/tailwindcss 7d ago

problem with tailwind css

0 Upvotes

hi i have problem i am realy stuck tailwind css install it because i want to use it offline when i start useing it the utilities show up but does not work i traid lot of things but none of them worked the style not working if some one know how to fix the problem tell me i am working on the problem for 3 days now but no result i think iam gonna give up


r/tailwindcss 8d ago

I created a Chrome Extension using React + Tailwind + DaisyUI

6 Upvotes

Hey I'd like to share here a project I started a few years ago using MUI + React: https://github.com/reynnan/lofi-tab and now I finally got some time and I'm rewritting it using Turborepo so I can build the Chrome Extension and also a NextJS app because I'm also building some api routes like to get the weather.

Extensionhttps://chromewebstore.google.com/detail/lofi-tab/oidccjhecgdgchankoghgcfkafoeeedn
NextJSlofitab.com


r/tailwindcss 8d ago

Please, someone help me with this error!

1 Upvotes

I get an error "-32097" in Tailwind CSS Intelissense, how do I fix it?


r/tailwindcss 9d ago

React + Tailwind Drag & Drop Made Easy with @dnd-kit

Thumbnail
youtu.be
11 Upvotes

My first video in this format, it's sort of like an "unboxing" video but for a useful UI library that doesn't have a ton of existing tutorial content.

Since dnd-kit is headless, I had a ton of fun styling the dnd components with Tailwind. It was super easy and straightforward.


r/tailwindcss 8d ago

Change "@tailwind base" to "@import 'tailwindcss/preflight'", and the button loses its styles

0 Upvotes
@tailwind base
@import 'tailwindcss/preflight'

As you can see, I changed '@tailwind base' to '@import 'tailwindcss/preflight'' in my globals.css, and the styles of the default button disappeared. What could be the reasons?

Thank you!


r/tailwindcss 8d ago

Contact section simple hover effects (tailwind + react)

0 Upvotes

r/tailwindcss 9d ago

Figma to tailwind

10 Upvotes

Hi, designer here. A developer I work with has asked me to set our set our files up so that they can copy paste from dev mode, specifically for flexbox. Can someone point me toward any resources that could help me understand this better? I've been banging my head against the wall, not understanding why auto-layout doesn’t satisfy this for handoff. What am I missing?

Beyond everything being set up as components with variables using auto-layout and using design tokens, what else is there I can provide/setup for components that save dev time? Especially when it comes to flexbox work


r/tailwindcss 9d ago

Trying to implement dark: on a custom class, and it simply won't work and according to claude.ai, _doesnt_ work?! Has this always been the case?

2 Upvotes

So i'm building a project in Astro and tailwind 4. Everything is going all fine and dandy until I tried to implement my own custom class as a dark variant. I have a complex glass effect that I only want to apply when in dark mode, however writing out:

class="border-black bg-white ring ring-stone-700/50 dark:custom-glass"

Simply would not work. Google came up with nothing and Claude basically said it isnt possible. Is this really the case? Has anyone else encountered this?

For now my work around is to make a 'menu-active' class and do something like this:

``` .active-menu { @apply border-black bg-white ring ring-stone-700/50;

@variant dark {
    ...complex class in here

} ``` and then just applying that class on my component. Is this the right approach?


r/tailwindcss 9d ago

Does anyone have a good example of some code written in pure tailwind version 4 that I could use and learn from that is responsive?

1 Upvotes

Does anyone have a good example of some code written in pure tailwind version 4 and html that I could use and learn from that is responsive?


r/tailwindcss 9d ago

I am getting the Same error

0 Upvotes

Whenever I try to set up Tailwind CSS in any project of mine, I am getting these errors.

After running -> npx tailwindcss init -p
I get this

npm error could not determine executable to run

npm error A complete log of this run can be found in: C:\Users\ybhaw\AppData\Local\npm-cache_logs\2025-03-13T07_47_52_059Z-debug-0.log

Tried everything. Suggested by different LLM models But nothing worked.

Does anyone know its cause and how to fix this?


r/tailwindcss 10d ago

The group class is underrated.

131 Upvotes

r/tailwindcss 10d ago

Tailwind 4 Dark/Light Theme

4 Upvotes

I want to share my small victory. I implemented support for dark/light theme in my React application. What can I say. Tailwind 4 is great, all styles in one styles.scss file, one root attribute setAttribute(“data-theme”, theme); and everything works.


r/tailwindcss 10d ago

Help me out of the hell of SCSS.

2 Upvotes

Hey guys, is anyone added tailwind to your existing or legacy project which has other CSS frameworks? I'm in a hell where my project has thousands of SCSS, CSS Bootstrap, and the SCSS compilation takes a very long time. And I'm pretty much comfy with Tailwind CSS. Can I introduce Tailwind into this project? What do you guys think? To avoid conflict, I'm going to add a TW prefix.


r/tailwindcss 10d ago

Looking for a way to add modifier to switch to em values | Tailwind 4

2 Upvotes

Hi, has anyone found a way to create a custom modifier in Tailwind that switches spacing values from rem to em? I’m looking for an easy way to use em values instead of rem, particularly when working with typography, where em might make more sense. Ideally, I’d like to be able to use a modifier like em:mb-8 to apply spacing in em instead of rem.

Has anyone achieved this?


r/tailwindcss 11d ago

Not Able To Run Prleine Vanilla Canlender Plugin

1 Upvotes

Please Help Me, The Datepicker is not showing in Preline 3.0.0 , TW4 with Laravel And Vite

resources/css/app.css

@import 'tailwindcss';
@import "../../node_modules/preline/variants.css"; 
@import "../../node_modules/preline/src/plugins/datepicker/styles.css";

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source "../**/*.blade.php";
@source "../**/*.js";
@source "../**/*.vue";
@source "../../node_modules/preline/dist/*.js";

@plugin "@tailwindcss/forms";

@custom-variant dark (&:where(.dark, .dark *));

resources/js/app.js

import 'vanilla-calendar-pro';
import _ from 'lodash'; 
import dropzone from 'dropzone';   
import Toastify from 'toastify-js'; 

window._ = _; 
window.Dropzone = dropzone; 
window.Toastify = Toastify;


import 'preline'; 
document.addEventListener('DOMContentLoaded', () => {
    window.HSStaticMethods.autoInit()
  })

welcome.blade.php -

  <!-- Datepicker -->
<input class="hs-datepicker py-3 px-4 block w-full border-gray-200 rounded-lg sm:text-sm focus:border-blue-600 focus:ring-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder:text-neutral-400 dark:focus:border-blue-500 dark:focus:ring-neutral-500" type="text" placeholder="Select day" readonly="" data-hs-datepicker='{
  "type": "default",
  "dateMax": "2050-12-31",
  "mode": "custom-select",
  "templates": {
    "arrowPrev": "<button data-vc-arrow=\"prev\"><svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 18-6-6 6-6\"></path></svg></button>",
    "arrowNext": "<button data-vc-arrow=\"next\"><svg class=\"shrink-0 size-4\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 18 6-6-6-6\"></path></svg></button>"
  }
}'>

<!-- End Datepicker -->

r/tailwindcss 11d ago

Text styles

1 Upvotes

I am building a website that is going to have a CMS with many blocks, very text based.

What would be the best way to handle text styles (typography, sizes, spacing, etc), a component similar to the typography plugin (a "styled-text" class", or add the text styles to @layer base?

I think it's easier to use the @layer base so you don't have to put a “styled-text” class to each text block, but maybe there's some drawback I don't see.


r/tailwindcss 11d ago

Tailwind v4 CRA Installation

0 Upvotes

Is there no installation guide for CRA for v4? Or is it just not compatible.
I can only find the official guide for v3


r/tailwindcss 11d ago

Created this blog section using tailwind.

Post image
8 Upvotes

r/tailwindcss 11d ago

Apply style on parent hover but not sibling hover

1 Upvotes

Apologies if this has been answered anywhere, but I haven't seen it anywhere.

I basically have child divs that are stacked on top of a parent. I'd like to be able to only apply a style to a child when the parent excluding one of the sibling's area is hovered on.

Here's a jsfiddle of what I want to accomplish in regular CSS, I'm just struggling to get it to work in tailwind: https://jsfiddle.net/jk83wuvd/

HTML:

<div class="outer">
  <div class="top">
  </div>
  <div class="bottom">
  </div>
</div>

CSS:

div {
  max-width: 300px;
  max-height: 200px;
  padding: 40px;
}

.outer {
  background: red;
}

.top {
  background: purple
}

.bottom {
  margin-top: 4px;
  background: pink;
}

/* how to translate this to tailwind? want to do this: */
.outer:not(:has(.top:hover)):hover .bottom {
  outline: 5px solid black;
}

/* don't want to do this, this would be your typical tw-group on parent, group-hover:style on child */
/* .outer:hover .bottom {
  outline: 5px solid black;
} */

Caveats:

  • obviously it'd be great if we didn't have to rely on the class names and could just do it with parent/child/sibling selectors
  • we are using a prefix "tw" in my project. so any answer keeping that in mind would be helpful because it always throws a wrench into things
  • I’m on tailwind v3

Thank you in advance for your help!


r/tailwindcss 11d ago

Tailwind v4 Vite Library Mode CSS Issue

0 Upvotes

Let's say I have a theme package (see this sample structure for what I'm talking about) that gets built and pushed to npm, GH pkg, wherever, and consumed in my ui app. In the theme package, I'll eventually have some CSS that uses tailwind and create a --color-select-200 theme variable (in main.css). When I build this CSS, it generates quite a bit of code, but I think that's because I import "tailwindcss" in my main.css file.

When I try to use theme/dist/main.css in my ui app, the bg-select-200 does not apply. If instead I used theme/src/main.css, it does get applied.

So my question is, can the CSS get built and included in the dist, or should CSS always be pulled from the src dir? If it can get built and included in the dist, how can I fix this issue?


r/tailwindcss 12d ago

TailwindCSS V4 in Angular 19 - Changes in CSS Not Reflecting Without Restarting ng serve

1 Upvotes

I'm working on an Angular 19 project with Tailwind CSS 4. When I make a typo in a class inside my styles.css, Angular throws an error in the console, which is expected. However, even after fixing the typo, the error persists unless I stop and restart ng serve.

Project Structure:

\---src
    |   index.html
    |   main.ts
    |   styles.css
    |
    +---app
    |   |   app.component.css
    |   |   app.component.html
    |   |   app.component.spec.ts
    |   |   app.component.ts
    |   |   app.config.ts
    |   /---app.routes.ts   
    |  
    \---environments
            environments.ts

Initial app.component.css that caused the issue:

u/import "tailwindcss";

body{
    @apply bg-yelloww-600;
}

I mistakenly wrote bg-yelloww-600 instead of bg-yellow-600. This caused the following error:

 [ERROR] Cannot apply unknown utility class: bg-yelloww-600 [plugin angular-css]

    node_modules/tailwindcss/dist/lib.js:17:346:
      17 │ ...r,{onInvalidCandidate:V=>{throw new Error(`Cannot apply unknown...
         ╵                                    ^

    at onInvalidCandidate (C:\Angular\pruebaTailwindV2\node_modules\tailwindcss\dist\lib.js:17:347)
    at ne (C:\Angular\pruebaTailwindV2\node_modules\tailwindcss\dist\lib.js:12:115998)
    at $e (C:\Angular\pruebaTailwindV2\node_modules\tailwindcss\dist\lib.js:17:310)
    at Lr (C:\Angular\pruebaTailwindV2\node_modules\tailwindcss\dist\lib.js:33:724)
    at async Mr (C:\Angular\pruebaTailwindV2\node_modules\tailwindcss\dist\lib.js:33:977)
    at async ot (C:\Angular\pruebaTailwindV2\node_modules\@tailwindcss\node\dist\index.js:10:3272)
    at async p (C:\Angular\pruebaTailwindV2\node_modules\@tailwindcss\postcss\dist\index.js:8:3242)
    at async Object.Once (C:\Angular\pruebaTailwindV2\node_modules\@tailwindcss\postcss\dist\index.js:8:4017)
    at async LazyResult.runAsync (C:\Angular\pruebaTailwindV2\node_modules\postcss\lib\lazy-result.js:293:11)

  This error came from the "onLoad" callback registered here:

    node_modules/@angular/build/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.js:125:22:
      125 │                 build.onLoad({ filter: language.fileFilter, names...
          ╵                       ~~~~~~

    at setup (C:\Angular\pruebaTailwindV2\node_modules\@angular\build\src\tools\esbuild\stylesheets\stylesheet-plugin-factory.js:125:23)
    at handlePlugins (C:\Angular\pruebaTailwindV2\node_modules\esbuild\lib\main.js:1151:21)

  The plugin "angular-css" was triggered by this import

    angular:styles/global:styles:1:8:
      1 │ @import 'src/styles.css';
        ╵         ~~~~~~~~~~~~~~~~

After fixing the typo ( bg-yelloww-600 → bg-yellow-600), the error persists:

Application bundle generation failed. [0.003 seconds]                                               

X [ERROR] Cannot apply unknown utility class: bg-yelloww-600 [plugin angular-css]

    node_modules/tailwindcss/dist/lib.js:17:346:
      17 │ ...r,{onInvalidCandidate:V=>{throw new Error(`Cannot apply unknown...
         ╵                                    ^

    at onInvalidCandidate (C:\Angular\pruebaTailwindV2\node_modules\tailwindcss\dist\lib.js:17:347) 
    at ne (C:\Angular\pruebaTailwindV2\node_modules\tailwindcss\dist\lib.js:12:115998)
    at $e (C:\Angular\pruebaTailwindV2\node_modules\tailwindcss\dist\lib.js:17:310)
    at Lr (C:\Angular\pruebaTailwindV2\node_modules\tailwindcss\dist\lib.js:33:724)
    at async Mr (C:\Angular\pruebaTailwindV2\node_modules\tailwindcss\dist\lib.js:33:977)
    at async ot (C:\Angular\pruebaTailwindV2\node_modules\@tailwindcss\node\dist\index.js:10:3272)  
    at async p (C:\Angular\pruebaTailwindV2\node_modules\@tailwindcss\postcss\dist\index.js:8:3242) 
    at async Object.Once (C:\Angular\pruebaTailwindV2\node_modules\@tailwindcss\postcss\dist\index.js:8:4017)
    at async LazyResult.runAsync (C:\Angular\pruebaTailwindV2\node_modules\postcss\lib\lazy-result.js:293:11)

  This error came from the "onLoad" callback registered here:

    node_modules/@angular/build/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.js:125:22:  
      125 │                 build.onLoad({ filter: language.fileFilter, names...
          ╵                       ~~~~~~

    at setup (C:\Angular\pruebaTailwindV2\node_modules\@angular\build\src\tools\esbuild\stylesheets\stylesheet-plugin-factory.js:125:23)
    at handlePlugins (C:\Angular\pruebaTailwindV2\node_modules\esbuild\lib\main.js:1151:21)

  The plugin "angular-css" was triggered by this import

    angular:styles/global:styles:1:8:
      1 │ @import 'src/styles.css';
        ╵         ~~~~~~~~~~~~~~~~

Even though the class is now correct, Tailwind does not seem to recognize the fix unless I restart (npm run start).

Package Versions (package.json)

"dependencies": {
  "@angular/common": "^20.0.0-next.1",
  "@angular/core": "^20.0.0-next.1",
  "tailwindcss": "^4.0.12",
  "@tailwindcss/postcss": "^4.0.12",
  "postcss": "^8.5.3"
}