Home Search Pricing Get inErrata About

Sign in Sign up

Graph/cluster-46

ClusterConcept

Tailwind Config Drift

cluster-46

Tailwind styling fails to apply consistently because theme variables, typography metrics, and component-level overrides diverge from the expected Tailwind configuration, so autocompletion misses tokens, CSS variables don’t resolve, and layout constraints/line-heights don’t match design intent.

Node Details

Public graph metadata

Updated6/23/2026

PageRank0.0000

Connections

50 linked nodes

INSTANCE_OFProblem

Vite fails with an internal server error during Tailwind processing: "Unexpected semicolon" in src/index.css after running shadcn init with TailwindCSS v4.

INSTANCE_OFProblem

Running `npx tailwindcss init -p` after installing Tailwind, PostCSS, and Autoprefixer fails with `could not determine executable to run`.

INSTANCE_OFProblem

the gradient buttons instantly switch colors — I've set `transition-all duration-300` as classes to animate the gradient background on the buttons. Tension: BUT the gradient buttons instantly switch colors. Outcome: I've also tried configuring the gradient using the `bg-gradient-t` and `bg-gradient-to-b`, but this doesn't change anything.

INSTANCE_OFProblem

I'm getting the above error from PostCSS — import appCss from '@/app/styles/globals.css?url'. Tension: I don't really know where to look to solve this error.

INSTANCE_OFProblem

CssSyntaxError: tailwindcss: C:\Users\aayus\Projects\e-commerce-platform\packages\ui\src\styles.css:1:1: The border-border class does not exist. — windcss -i ./src/styles.css -o ./dist/index.css. Tension: If border-border is a custom class, make sure it is defined within a @layer directive. Outcome: Rebuilding...

INSTANCE_OFProblem

Tailwind CSS rounded utility classes like `rounded-lg` and `rounded-md` render with no border radius, while other radius classes (e.g., `rounded-xl`, `rounded`) work. This persists in production and across browsers.

INSTANCE_OFProblem

What does class `group/indicator` doing in this case? — I'm working on Shadcn-vue and TailwindCSS. Tension: If I remove from class of ``, then `group-[[data-state=indeterminate]]/indicator:hidden` in `` will not work. Outcome: Where can I get more information about this?

INSTANCE_OFProblem

I want to style the Carousel component so that it has a width of 50% of the page, and a height of like 32REM. — I currently have the following React component:. Tension: When I make the Carousel component bigger, the content doesn't scale, but auto-scaling the content doesn't make it bigger either. Outcome: I cannot for the life of me find a way to do it.

INSTANCE_OFProblem

the html goes from — In a Sveltekit application using Tailwind and shadcn-svelte, all works fine except for a specific page located in routes/sales/[client_id]. Tension: it stays like that even on the other pages.

INSTANCE_OFProblem

the `TableBody` is condensed in the first column — A fixed `TableHeader` and a scrollable `TableBody`. Tension: I m trying to achieve this. Outcome: How do I fix this?

INSTANCE_OFProblem

it just creates another attribute with the same name — Span names from the documentation list: https://develop.sentry.dev/sdk/performance/span-operations/. Tension: I tried to specify through an attribute.

INSTANCE_OFProblem

It should be render from `right to left` instead of `left to right`. — I am trying to translate Arabic for FastAPI and I created template as shown here:. Tension: looking for something which can avoid this. Outcome: I know, I can add `style="direction: rtl"`.

INSTANCE_OFProblem

Theme isn't set to use Theme.AppCompat or Theme.MaterialComponents — I tried to add this line in AndroidManifest.xml : android:theme="@style/NormalTheme". Tension: e problem is , please help me .!

INSTANCE_OFProblem

Generated CSS with Rolldown-Vite (in both dev and production mode) — Since v4 targets Baseline 2023 browsers, and I don't want to support older browsers. Outcome: What causes the conversion in Rolldown-Vite, and how can it be prevented?

INSTANCE_OFProblem

border-radius does not allow bending a corner in multiple directions within a single component — top-left, where multiple border lines branch out. Tension: I tried using multiple DOM elements to achieve the effect, but then the original border becomes visible. Outcome: How can I hide those borders?

INSTANCE_OFProblem

body{ background-color: aqua; } — Django settings for tweeterproject project. Tension: utilities/classes always override static CSS styles. Outcome: Maybe try using `!important` within the CSS.

INSTANCE_OFProblem

When rendering a sentence as a list of per-character components inside a flex container with wrapping, words break mid-word instead of only between words. Additionally, wrapped lines sometimes begin with a space character.

INSTANCE_OFProblem

I wasn't able to find a prop for that. — Given the Nuxt UI marquee component. Tension: is it possible to control its speed? Outcome: Maybe this can be achieved with a Tailwind class inside the `ui` prop?

INSTANCE_OFProblem

I want to continue using the same media breakpoints and media queries, which are different from the default values in Tailwind — migrating a code base from Styled Components to Tailwind v4.

INSTANCE_OFProblem

A child element set with a fixed `aspect-ratio: 16/9` overflows the parent vertically when the parent's `max-height` is much smaller than the computed height from the parent's `max-width`. The child’s size won’t respect the height constraint even when using `w-full`/`h-full`/`max-*` classes.

INSTANCE_OFProblem

the text and headings shift slightly upward compared to English — when switching to Arabic (RTL).

INSTANCE_OFProblem

it results in a very narrow and tall tooltip that wraps on every other word or it fails to wraps and exceeds the max width — Whenever I try to implement it in tailwind. Tension: I want the `div` with `absolut. Outcome: is there a way to do the same thing in tailwind?

INSTANCE_OFProblem

all of the sections are forcefully fit in the same width — As soon as I connect my html page with the "output.css" file. Tension: It is no longer 100vw for each section. Instead, all sections are fit inside the same 100vw.

INSTANCE_OFProblem

open-modal:bg-red-800 doesn’t work — I’m using Tailwind CSS and I want to conditionally style a child element based on a class applied to the . Tension: Tailwind doesn’t directly check for body classes like that.

INSTANCE_OFProblem

both selectors apply at the same time — When I resize to `xl` screens. Tension: So instead of only `1, 5, 9` being red, I get `1, 3, 5, 7, 9`. Outcome: It looks like Tailwind’s `xl:` prefix doesn’t override the base `[&>*:nth-child()]` rule, and both are active.

INSTANCE_OFProblem

the Welcome appears also be 40% rather than normal — I have a div with a background image and it's opacity is set to 40%. Tension: I tried adding opacity 100 but it made no difference. Outcome: use opacity only for the background.

INSTANCE_OFProblem

Since the pseudo-element is inside `B`, it only positions relative to `B`. — I’m working on a grid layout using Tailwind CSS (v4.1).

INSTANCE_OFProblem

calc(100% - (my-custom-height-2)) — side a `calc()` expression in utility classes? Tension: this is an invalid CSS value.

INSTANCE_OFProblem

`bg-muted` in Tailwind CSS v4 renders in the HTML but does not produce any visible background color when using custom CSS variables `--muted`/`--muted-foreground` defined in `@layer base`. The color utilities appear to have no effect at runtime.

INSTANCE_OFProblem

A child inside a flex-grow container keeps expanding with its content, but one sub-site needs its content to be constrained to the parent's height and overflow-scroll instead. The parent container styles should not be modified.

INSTANCE_OFProblem

it does not work with dynamic class names — in my Vue.js project. Tension: the plugin cannot scan the code looking for dynamic class names.

INSTANCE_OFProblem

Determining the correct/recommended way to create a custom box-shadow with specific offset/blur/spread and color values in Tailwind.

INSTANCE_OFProblem

In a flex row layout, an element with a fixed flex-basis of `800px` does not shrink when the viewport becomes smaller, while the other element shrinks. Using percentage basis values makes both elements shrink as expected.

INSTANCE_OFProblem

however, when I inspect a PrimeNG component, I see this when I inspect — Angular 19; PrimeNG 19; Tailwindcss 4.1. Tension: I was expecting that "Exo 2" would become the default font for my project. Outcome: Font declaration with TailwindCSS v4.

INSTANCE_OFProblem

the gaps between them remain transparent — apply a single background gradient to a grid of cards (statistic blocks) in React using Tailwind CSS. Tension: the gradient visible only on the cards. Outcome: You could also use no gap on your grid, but add a border to the grid-items and add an inner wrapper.

INSTANCE_OFProblem

Mobile browser: Safari (iPhone). Tension: On desktop Safari, everything works fine. But on mobile Safari, there's no spacing between elements. Outcome: The lack of CSS nesting can be a significant influencing factor.

INSTANCE_OFProblem

After applying `line-clamp-3`, the text is still rendered beyond the 3rd line, with part of the next line appearing. The 4th line content is clipped only slightly instead of being fully clamped.

INSTANCE_OFProblem

Tailwind CSS v4.1 does not work in an Angular 15 application, while Tailwind CSS v3.4 works correctly.

INSTANCE_OFProblem

the responsive styles didn't apply — only `text-400-12` was applied. Outcome: the responsive styles didn't apply.

INSTANCE_OFProblem

Custom breakpoint defined via @theme (with a px value) does not produce the expected responsive behavior for utilities like flex-direction, even though some styles (e.g., background color) appear to work.

INSTANCE_OFProblem

Cannot apply unknown utility class: pt-7. Tension: This causes a fatal error. Outcome: it works.

INSTANCE_OFProblem

PrimeNG 19 component styles (e.g., InputText border) are not being applied in an Angular 19 + Tailwind CSS 4 setup.

INSTANCE_OFProblem

FlyonUI Collapse icon rotation/animation (collapse-open:rotate-180) does not work when the project uses SASS with TailwindCSS v4.

INSTANCE_OFProblem

Each size modifier comes with a baked in `max-width` designed to keep the content as readable as possible. — Overriding max-width. Tension: This isn't always what you want though, and sometimes you'll want the content to just fill the width of its container. Outcome: add `max-w-none` to your content to override the embedded max-width.

INSTANCE_OFProblem

The light theme is perfect; it looks exactly as shown in the screenshot. — To change the default theme, you need to set another theme as the default. Tension: you need to set another theme as the default. Outcome: set cupcake as default.

INSTANCE_OFProblem

the label text starts exactly where the border is, while the text inside the textarea starts slightly to the right due to padding — I'm trying to position `` above a `` in Tailwind CSS. Tension: I want to align the text inside input and the label vertically. Outcome: The `` content is offset by `2px` from the border.

INSTANCE_OFProblem

the theme (dark/light) class is being applied, but the colors don't change — I have theme change functionality in my app using context.

INSTANCE_OFProblem

On desktop `textarea` is 1 row (perfect!) — But on mobile (iOS), it looks like this ("two" lines):. Tension: I do not know how to handle it.

INSTANCE_OFProblem

Outcome: The first `tr` itself doesn't get an `outline`, only in focus mode.

INSTANCE_OFProblem

PDFs generated by spatie/laravel-pdf lose the stylesheet after deployment

[inerrata]Tags Knowledge Graph Docs About Team Pricing Contact Report a Bug Privacy Terms Cookie Settings Do Not Sell or Share My Info

© 2026 Inerrata

Tailwind Config Drift - inErrata Knowledge Graph | Inerrata