Tailwind svg fill not working. Mar 17, 2018 · So you are setting it to text-grey-darker no mat...

Tailwind svg fill not working. Mar 17, 2018 · So you are setting it to text-grey-darker no matter what. Use utilities like fill-indigo-500 and fill-lime-600 to change the fill color of an SVG: This can be useful for styling icon sets like Heroicons. This guide outlines the core usages, conditional applications, customization techniques, and more when working with Tailwind's fill utilities. However, even when the SVG is properly formatted to use fill: currentColor, the fill does not match the currentColor (the text color) of the parent element (an img tag). The built-in Tailwind utility fill-current is your best friend here! Jul 6, 2023 · Master SVG color manipulation with Tailwind CSS. By default, all icons have a color value of currentColor, a size value of 24px, and a stroke width of 2. Basic usage Setting the fill color Use the fill-* utilities to change the fill color of an SVG. Sep 28, 2025 · You might try setting the text-red-500 class, but the fill remains black. mycircle { fill: green; } This works great, however I'm looking for a way to modify the "fill" attribute of an SVG when it's being served as a BACKGROUND-IMAGE. This code so far just makes the outline of the star yellow. Jan 7, 2025 · Here are a few common methods. The only way I see to change color of SVG icon is Learn how to fix the Tailwind w-full not working issue with this step-by-step guide. I'm in a NextJS environment using NextUI and tailwind css. If you're doing this method and it still isn't updating or only the stroke is updating, then that might be worth considering. Approach: You can simply customize the class of SVG by adding text-colo r or background-color in icons, but in this process, you have to carefully use the utilities for styling the SVG like fill and stroke in Tailwind CSS. Style by using CSS Styling icons is easy to accomplish using CSS. We'll cover the common causes of the problem and provide solutions for each one. that makes me think that those classes Copy Utilities for styling the fill of SVG elements. Sep 28, 2016 · If you are not in control of your SVG, (perhaps because it comes from an external source you are re-theming,) you are stuck using !important to override the SVG fill property. Tailwind CSS SVG Fill Classes The following is the list of Tailwind CSS SVG Fill classes that provides an effective way of handling SVG element colors. I have a logo here in a component and I can't for the life of me get the className fill options to pass correctly. Normally, if you do not set "width" and "height" of parent container, you wont see the image. flex. I tried a lot ways to do it, but there is no result. Remove text-grey-darker from your SVG and everything will work as expected, you don't even need the hover stuff generated for the svgFill module. logo-img path { fill: #000; } The above svg loads and is natively fill: #fff but when I use the above css to try change it to black it doesn't change, this is my first time playing with SVG and I am not sure why it's not working. In this post, we use Heroicons with both TailwindCSS and non-Tailwind classes. Utilities for setting the width of an element. that my_flex Nov 28, 2022 · All classes was applied, but there is a once that doesnt work, Its SVG element`s fill key. When i put to class field, for example: 'fill-blue-700', after compilation i cant see applied blue color on SVG Element. Might help to have the full svg/codepen Using and customizing the color palette in Tailwind CSS projects. Jul 9, 2021 · tailwind css svg icon text center is not working Asked 4 years, 8 months ago Modified 4 years, 8 months ago Viewed 4k times Flexbox & Grid flex-basis Utilities for controlling the initial size of flex items. mystar { fill: blue; } circle. Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML. json. Jan 17, 2023 · The tailwind play platform with a Heroicon styled svg house icon. by spamming h-full w-full on every flex item you’ll get very unpredictable results, they’ll be pushing each other away a lot. h-full. Enhance user experience with dynamic menu toggling. 2- Use the svg directly as inline element in your html and then you can change the fill using css fill:"#color" Feb 4, 2019 · Maybe this is obvious, but when I did this using svgs I made in inkscape, there was also a style tag at the bottom of the svg with fill=#000000 that was overriding my color preferences. In Tailwind CSS, adjusting the stroke width is simple and can be done using utility classes. bg-green-100 aside. Might help to have the full svg/codepen SVG fill Attribute The fill attribute defines the color of the inside of an element. This makes it easy to set an element's fill color by combining this class with an existing text color utility. These icons come with a default height and width, just like the outline icons, and they also come with the fill attribute. Prefix an animation utility with a breakpoint A set of beautiful, customizable components that stay maintained and up to date. If your SVG is in your code base, it is much better to set fill="currentColor", and then set the CSS color property. Anyone know how? To change any SVG with CSS, you need to target the fill property of the SVG itself. polygon. Fill on a div is an invalid property (I believe) Edit wait no that’s not right either. Utilities for controlling the bounding box of an element's background. Backgrounds background-image Utilities for controlling an element's background image. While these docs use react-native-svg, the concept applies to all libraries. This class Utilities for controlling the background size of an element's background image. Learn about browser support and compatibility with other tooling. Jun 5, 2024 · With invert(1) you change it from black to white even in light mode (try commenting out inverting part). Use the fill-current utility to set the fill color to the current text color: Sep 4, 2023 · Tailwind will not recognize your fill-${color-var} class because it only works with explicitly defined classes in the config such as fill-primary, fill-red-600 . Utilities for styling the fill of SVG elements. The value of the fill attribute can be a color name, rgb value or a hex value. Jan 26, 2025 · Furthermore, the second doesn't work because: bg-* arbitrary value class defaults to background-color if Tailwind can't determine the value type, as with CSS variables. Also see this thread if you're using older Chrome: CSS prefers-color-scheme works on Firefox but not on Chrome issue Dec 10, 2021 · The current part in fill-current is coming from your colors in the tailwind. Jul 8, 2021 · 2 You need to remove fill="#7400B8" attributes from each path element. In such cases, the stroke-{color} class should be used. By the end of this article, you'll be able to get your Tailwind layouts working properly again. Global Styling Adjusting icons can be done by color, size and stroke width. Jul 16, 2021 · How to change the color of an svg element in Tailwind Asked 4 years, 7 months ago Modified 4 years, 6 months ago Viewed 2k times this is not a tailwind question, it’s a css question. Dec 1, 2020 · Learn how to change SVG color fill on hover using Tailwind CSS with practical examples and expert advice from the Stack Overflow community. You need to use the <svg> tag to manipulate it with the utilities, as suggested by @talkenson. However, this is not a Tailwind problem, rather it is a restriction with how references in SVGs work in HTML in general – you would still see this problem without Tailwind. If you overrode the colors section in your theme, then this won't be available anymore. Check working demo. May 17, 2022 · i am implementing a reponsive website with react and tailwind , i have an SVG image which i want to make it as a background image for a main tag but it doesn't work . Jan 28, 2025 · Issue: Tailwind CSS IntelliSense Not Working in VS Code (v4) If you're using Tailwind CSS v4 and noticing that IntelliSense isn't suggesting class names properly, the issue might be related to the "tailwindCSS. Your HTML: Resizing with Tailwind h-* and w-* utilities can be used to adjust the size of the icon. Complete guide with examples and troubleshooting tips. Learn how to use responsive utility variants in Tailwind CSS to create adaptive user interfaces for different screen sizes and devices. svg extension, so you can import them like any other JavaScript file. Utilities for styling the stroke of SVG elements. Nov 18, 2020 · Also the whole html body is not getting full width in medium and small screens. What am I missing here? The solution for filling the height of the viewport with Tailwind CSS is to use the h-screen class. If the SVG doesn't have a fill property, you can still use the fill property. The fill attribute can be used with the following SVG elements: <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref> and <tspan>. Explore usage, conditional applications, and customization techniques. Feb 1, 2024 · 0 So I've been cracking at this and I can't seem to figure it out. This is just a shorthand for animate-[var(<custom-property>)] that adds the var() function for you automatically. bg-blue-100#left-pane div. flex-col. This makes it easy to set an element’s fill color by combining this class with an existing text color utility. Learn fill, stroke, and advanced techniques for dynamic icons. For shapes and text it's a presentation attribute that defines the color (or any SVG paint servers like gradients or patterns) used to paint the element; for animation it defines the final state of the animation. If op classes the svg and not the parent div the path should inherit the full (depending on reset and the rest of the svg content) I’ve changed fills on super basic svgs by targeting the svg itself. Trouble is that I can't set value (color) in fill property in Chrome, but in Firefox it works. Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS. Tailwind provides a range of built-in classes, along with the flexibility to use arbitrary values, enabling precise control over stroke thickness for SVG elements Nov 18, 2020 · Also the whole html body is not getting full width in medium and small screens. These attributes will automatically be applied to the underlying <svg> element. Sizing classes are working such as h-4 and w-4 but fill-current text-white does not change the fill color of the svg. Use fill-current to set the fill color of an SVG to the current text color. Tailwind CSS Autofill and Scrollbar Styling with ShadCN and Dark/Light Mode If you're using ShadCN and implementing dark and light modes in your project, you might have encountered issues with the background color of autofilled input fields. 2- Use the svg directly as inline element in your html and then you can change the fill using css fill:"#color" Style SVGs effortlessly with Tailwind CSS utilities for fill, stroke, and stroke-width, ensuring flexible, accessible, and theme-consistent designs across projects. my take: div. js Image will take up all the "width" and "height" of the container parent element. I did this before, I did this in some other places but, for some reason, it stopped working. Any suggestions? Learn how to use Tailwind CSS `fill` utilities to style SVG shapes effortlessly. config. . When I work with SVGs I make sure the viewBox is there before applying a width or height, having both will both display and control the size of the rendered SVG. Oct 9, 2020 · The classes specified in the svg file don't register so I applied them to the helper. fill-current to set the fill color of an SVG to the current text color. What I don't understand is that I still haven't used any of the responsive classes from tailwindcss like md, sm or lg. May 27, 2024 · Setting default font colors - svg fill currentColor not behaving as expected #13750 Closed Answered by wongjn Der-Alex asked this question in Help edited Jan 31, 2019 · This SVG filter will only impart color to icons with a white fill, so If we have an icon with a black fill, we can use invert() to convert it to white before applying the SVG filter. Using utilities to style elements on hover, focus, and more. To make a proper SVG icon styled with Tailwind remove the stroke , fill and stroke-width attributes and use proper TailwindCSS utility classes instead: Utilities for styling the fill of SVG elements. Here we use the fill attribute for a polygon, rectangle, circle and Jul 9, 2021 · tailwind css svg icon text center is not working Asked 4 years, 8 months ago Modified 4 years, 8 months ago Viewed 4k times Feb 20, 2026 · React Native does not have SVG components but universal SVG support can be achieved with 3rd party libraries such as react-native-svg. (Pic) My suggestion is to try using text class, or maybe you can provide your SVG. Jul 8, 2024 · 2 Answers Sorted by: if you use fill property, you should have parent element to be relative which you already set next. Jul 23, 2025 · As it is XML-based, you can easily edit or change the SVG icon colors with Tailwind. Tailwind's text-red-500 sets the CSS color property. experimental. By default, the SVG's fill property doesn't magically inherit this color value. If you have a specific section you want to adjust within the viewport, you can further customize it using the h-[calc(100vh_-_150px)] class, adjusting the height accordingly. Tailwind CSS provides fill-color-value utilities to add fill to the SVGs. This method allows you to treat SVGs as React components, making them easy to manipulate and style using React's capabilities. configFile" setting in VS Code's settings. Utilities for controlling the vertical alignment of an inline or table-cell box. I am using tailwind and trying to fill in the color of this star icon. May 2, 2012 · Furthermore, the second doesn't work because: bg-* arbitrary value class defaults to background-color if Tailwind can't determine the value type, as with CSS variables. Utilities for controlling an element's background image. May 11, 2024 · Create a responsive navbar with a hamburger menu icon using Tailwind CSS and Alpine. This is just a shorthand for rotate-[var(<custom-property>)] that adds the var() function for you automatically. Learn how to change the color of an SVG element using CSS techniques and properties. Aug 5, 2025 · The fill attribute has two different meanings. The fill attribute is used to color the interior of an element, while the stroke is used to color the element's border. <AiOutlineStar className="text-yellow-400" /> Changing the backgroundColor property only changes the box of the star. You can pass props such as width, height, fill, stroke, and any other attribute accepted by the native <svg> element. Utilities for rotating elements. Here's the CSS code: . Tailwind CSS Fill The fill property in CSS is used to set the color of SVG shapes, such as paths, circles, rectangles, etc. bg-red-100#right-pane i haven’t tried it in the browser but the main thing here is items-stretch. Styling icons individually can be done by passing props to the icon component. Jan 5, 2022 · I'm running into the same issue It doesn't actually fill using the correct color. Dec 21, 2021 · Hi @ArgekarStudios, if I'm not mistaken, this is not possible in HTML/CSS in general, so not even in Tailwind. Responsive design. Fill color Use . Every icon has a class attribute applied called lucide. Dec 29, 2022 · I am using Tailwind with angular issue is I have svgs icon with my input and its not clickable I try to wrap with div or using cursor-pointer but nothing works. Utilities for styling the fill of SVG elements. Covers all Tailwind colors for SVG icons, responsive fills, and dark mode support. I deleted that line and it worked. Aug 5, 2023 · Hence one of the common problems. js. Jul 19, 2020 · We can adjust three other aspects of the SVG with Tailwind utilities: fill color, stroke color, and stroke width. Dec 16, 2023 · Explore how to use SVGs, from the official Tailwind icons, Heroicons, and alternative options for incorporating icons into your design. May 14, 2016 · I'm trying to fill a twitter icon SVG with it's color through CSS. Jul 23, 2025 · Stroke Width of an SVG Element is a key property that defines the thickness of the outline for shapes like circles, rectangles, and paths. Sep 6, 2021 · Besides this behaviour and params like min-w-[300px] everything works well when I use things from tailwind. Apr 18, 2024 · When working with SVG icons, colors are typically managed through two inline attributes: fill and stroke. Dec 20, 2021 · Hi! For example, when using raw svg - you can add text-{current/color} class, but this class won't be applied if you have a fill option in there. I want to make the star itself completely yellow from the inside. Responsive design Prefix a rotate utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above: Feb 20, 2026 · React Native does not have SVG components but universal SVG support can be achieved with 3rd party libraries such as react-native-svg. items-stretch. Jun 13, 2021 · Then I can add another Tailwind class like dark:text-black, which should make the SVG black when the user enables dark mode. svg path { f Aug 19, 2024 · Besides, we can also pass regular properties such as stroke, fill, width and height of the <svg> to the Heroicon, which is assigned to the <svg> element. Importing as a React Component: In this approach, you can import SVG files directly as React components. Nov 9, 2017 · You can't change fill color using style if the svg is applied to img tag You have 2 solutions: 1- Change it inside the svg file itself, this will work if it will always have a single color. Aug 19, 2024 · Besides, we can also pass regular properties such as stroke, fill, width and height of the <svg> to the Heroicon, which is assigned to the <svg> element. Feb 8, 2026 · Set SVG fill colors in Tailwind CSS with fill-{color} utilities. Utilities for controlling the background size of an element's background image. SVG files have a . Apr 16, 2022 · Please create a new issue that includes a reproduction showing it not working so we can clone it down and troubleshoot it in the fastest possible way. Utilities for controlling the style of an element's borders. If an SVG icon uses stroke lines, then fill-{color} will not give the correct result. Utilities for controlling how a replaced element's content should be resized. In this example, the fill is set to the current text color with fill-current. yhlsx eydtoul rqunr xuamg tojclod pgeqo pyeqmsz svz wgvhnu abfxe