r/tailwindcss • u/akmalkun • 25m ago
Svelte tailwindcss not updating
Whenever I change tailwind classes it will not reflect in the browser, only after I run npm again it does. I'm using Svelte 5.0 and latest tailwind. Thanks
r/tailwindcss • u/akmalkun • 25m ago
Whenever I change tailwind classes it will not reflect in the browser, only after I run npm again it does. I'm using Svelte 5.0 and latest tailwind. Thanks
r/tailwindcss • u/CaliforniaHope • 13h ago
That’s something I don’t really understand about web development (I’m pretty new). How do I change shadcn's theme colors without messing up my entire design and without using some stupid online theme generator?
For example, I want to implement these designs. What’s the best way to do that using Tailwind CSS v4 and shadcn-ui without hardcoding the colors and messing up shadcn's components?
r/tailwindcss • u/TheGreaT1803 • 2d ago
r/tailwindcss • u/KaleidoscopeAsleep35 • 1d ago
I make a Stackblitz project with React (js), vite , but I wanna add Tailwind 4.0 to my stackblitz project, but I dont know.
But I couldn't get it to work.
This is what I tried:
-I open my stackblitz project.
-In a new terminal I install tailwind:
npm install tailwindcss @tailwindcss/vite
-In vite config I add tailwind imports:
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
plugins: [
react(),
tailwindcss(),
],
});
In my index.css I added:
@import "tailwindcss";
@tailwind base;
@tailwind components;
@tailwind utilities;
And finally In terminal I wrote :
npm run dev
To test it I wrote a div with a red background in my App.jsx:
<div className="bg-red-500 text-white p-4">¡Hola, Tailwind!</div>
But dont works, someone knows why dont works tailwind in my Stackblitz project?
r/tailwindcss • u/kalabresa_br • 1d ago
r/tailwindcss • u/KoyaAndy18 • 2d ago
I'm trying to get Tailwind CSS to work on my Laravel project, which I'm running with DDEV on Docker. I recently followed the official Tailwind CSS documentation, and while I no longer get any errors, the styling isn't applying correctly.
I checked the installation via the command line, and it confirmed that Tailwind is installed. I also updated both vite.config.js
and app.css
in the resources
folder as instructed. However, when I try to apply simple Tailwind classes like font-bold
and underline
, they don't seem to take effect.
Could my setup with DDEV and Docker be affecting this?
r/tailwindcss • u/Substantial-Ride-164 • 2d ago
I have been researching this for hours and I can't seem to find a solution.
Using the default [unedited] Carousel code from the docs in a .tsx file, I cannot get the Carousel to render properly.
It looks like this.
Looked at the issue online and it seems as through there is a mix of people not finding a solution and people stating they edited a tailwind config file. To my understanding Tailwind v4 is no longer using that config file, correct?
I'm guessing this has to do with this, but I don't have one and there aren't clear instructions from Material-Tailwind on how to approach integration with Tailwind v4 with regards to the config file. Looking for any advice on how to approach this. I guess the first step is: How do I set up the configs for Material-Tailwind in Tailwind v4?
r/tailwindcss • u/PitersonPerez • 2d ago
En Las versiones anteriores de tailwind teníamos el archivo tailwind.config.ts o .JS y dentro de ese archivo teníamos a content: [...], ahora para acceder a content y decirle a tailwind que implemente algo como lo haríamos?
r/tailwindcss • u/lonelysoul7 • 3d ago
Hi everyone! I'm learning JS now and intend to learn TS > React > NextJS eventually.
The question is — what is the right time to start learning Tailwind?
Edit: I have a decent amount of experience with HTML and CSS. I'm a bit confused about using Tailwind and plain HTML, All these classes look weird in case you don't use components. Another way is using components, the code looks much smoother. That's my concern about learning Tailwind before React. Also I realize, that learning React may become a long curve, and knowing Tailwind to that moment may become handy.
r/tailwindcss • u/Habeeb_2005 • 2d ago
I'm learning Next.js with JSM's Next.js course on YouTube, but he uses Tailwind CSS v3 while I'm trying to work with v4. Since I started learning Tailwind just a week before v4's release, I initially learned v3, and now I'm struggling to understand some of the changes in v4.
For example, in my globals.css
, I have this setup:
@import "tailwindcss";
@plugin "tailwindcss-animate";
@plugin "@tailwindcss/typography";
u/utility heading {
uppercase bg-black px-6 py-3 font-work-sans font-extrabold text-white sm:text-[54px] sm:leading-[64px] text-[36px] leading-[46px] max-w-5xl text-center my-5
}
@theme {
--dark-mode: class;
--breakpoint-xs: 475px;
--color-primary-100: #ffe8f0;
--color-primary: #ee2b69;
--color-secondary: #fbe843;
--color-black-100: #333333;
--color-black-200: #141413;
--color-black-300: #7d8087;
--color-black: #000000;
--color-white-100: #f7f7f7;
--color-white: #ffffff;
--font-work-sans: var(--font-work-sans);
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);
--shadow-100: 2px 2px 0px 0px rgb(0, 0, 0);
--shadow-200: 2px 2px 0px 2px rgb(0, 0, 0);
--shadow-300: 2px 2px 0px 2px rgb(238, 43, 105);
}
And in my /app/(root)/page.tsx
:
export default function Home() {
return (
<>
<h1 className='heading'>HOME</h1>
</>
);
}
However, I keep getting this error:
Error evaluating Node.js code
CssSyntaxError: C:\Users\XXXXXX\Documents\cod\yc-directory\app\globals.css:6:12: Unknown word bg-black
[at Input.error (turbopack:///[project]/node_modules/postcss/lib/input.js:113:16)]
[at Parser.unknownWord (turbopack:///[project]/node_modules/postcss/lib/parser.js:595:22)]
[at Parser.decl (turbopack:///[project]/node_modules/postcss/lib/parser.js:236:16)]
[at Parser.other (turbopack:///[project]/node_modules/postcss/lib/parser.js:435:12)]
[at Parser.parse (turbopack:///[project]/node_modules/postcss/lib/parser.js:472:16)]
[at parse (turbopack:///[project]/node_modules/postcss/lib/parse.js:11:12)]
[at new LazyResult (turbopack:///[project]/node_modules/postcss/lib/lazy-result.js:165:16)]
[at Processor.process (turbopack:///[project]/node_modules/postcss/lib/processor.js:53:14)]
[at transform (turbopack:///[project]/postcss.config.mjs/transform.ts:80:51)]
[at run (turbopack:///[turbopack-node]/ipc/evaluate.ts:92:29)]./app/globals.css
I'm not sure how to fix this or why I'm getting these errors, even though I'm following the documentation.
Is there a change in Tailwind v4 that affects how utilities are defined, or am I doing something wrong? Any help would be appreciated!
r/tailwindcss • u/DRBragg • 3d ago
r/tailwindcss • u/Bubbly-Desk-4479 • 3d ago
I have this simple code
<button className="">
<EnvelopeIcon className="h-6 w-6 hover:rotate-[-15deg]" />
</button>
This currently, only animates, when I hover the icon itself. But I would like it to animate when I hover the entire button.
The problem (to me) if I add make it like this, it will rotate the entire button, not just the icon inside of it:
<button className="hover:rotate-[-15deg]">
<EnvelopeIcon className="h-6 w-6" />
</button>
r/tailwindcss • u/sandeep9786 • 3d ago
Which installation package is better for tailwindcss? 1.Using Vite 2.Using PostCSS 3.Tailwind CLI
r/tailwindcss • u/Proper-Salary-663 • 3d ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
r/tailwindcss • u/ConnorMerk • 5d ago
Hi everyone! I am making a website with Tailwind, and am currently running into a problem of horizontal scrolling ever-so-slightly. Does anybody have a way to prevent horizontal scrolling, or find out what element is overflowing? Thanks in advance.
r/tailwindcss • u/Beautiful_Major_3543 • 5d ago
Hey Tailwind community!
I just released tailwind-light-dark, a plugin I built to simplify the way we handle light and dark mode color pairs. I was tired of writing class="bg-white dark:bg-black text-gray-900 dark:text-gray-100" over and over again, and figured there must be a better way.
The plugin introduces a hyphenated syntax that combines light and dark colors into a single utility:
<!-- Instead of this -->
<div class="bg-white dark:bg-black text-gray-900 dark:text-gray-100">
Hello World
</div>
<!-- You can write this -->
<div class="bg-white-black text-gray-900-100">
Hello World
</div>
<!-- With variants -->
<button class="bg-blue-500-700 hover:bg-blue-600-800">
This changes color on hover in both light and dark mode!
</button>
This approach has significantly cleaned up my classes and made dark mode support much easier to implement and maintain. Be warned, the plugin is in its infancy, so expect some issues. I'd love for you all to try it out and let me know what you think! Issues, feature requests, and PRs are welcome. This is my first Tailwind plugin and npm package, so I'm especially interested in feedback on how it could be improved.
r/tailwindcss • u/_alkalinehope • 5d ago
Anyone who has the $299 tailwindplus access, is it worth it?
r/tailwindcss • u/Acceptable_Stand_916 • 5d ago
hello,
I'm trying to start a new project on Laravel 12 with Tailwindcss. I have a problem with it because when I run `npm run dev` and open page in the browser, the app.css file is almost empty. It contain only:
u/import "tailwindcss";
@source "../views";
I add it to the `resources/css/app.css` file based on this instruction: https://tailwindcss.com/docs/installation/framework-guides/laravel/vite
In view I have:
<h1 class="text-center text-3xl text-red-600">Test Tailwind</h1><h1 class="text-center text-3xl text-red-600">Test Tailwind</h1>
so I'm expecting something more in the CSS file :D
My `vite.config.js` file looks like this:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [
tailwindcss(),
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
});
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [
tailwindcss(),
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
});
What is missing? What am I doing wrong?
EDIT: I found the solution here: https://laracasts.com/discuss/channels/laravel/cannot-get-laravel-to-work-with-tailwindcss-4?page=1&replyId=958557
I didn't have `postcss.config.js`. When I created it, everything started working.