I'm trying to add a pipe to my menu links, using tailwind ::before pseudo element but it doesn't work.
<a className='text-xl font-normal before:content-["|"] before:pl-8 bg-white font-open-sans'>home</a>
The above result in the following
How can I add the pipe properly with padding/margin between text and pipe?
You just need to add the padding to the other side of the pipe, changing before:pl-8 to before:pr-8.
Working version here: https://play.tailwindcss.com/G5IqVTI5Rg
Related
I was wondering if there is a way to chain multiple tailwind css classes on a single hover instance on an html element instead of using multiple hover instances.
For instance instead of this
<button class="hover:bg-blue-900 hover:text-white"></button>
whether you can have this or something else
<button class="hover:bg-blue-900:text-white"></button>
No there isn't. As from the docs(https://tailwindcss.com/docs/hover-focus-and-other-states), you can see they themselves add multiple classes for focus/hover.
However you can create reusable styles to counter this
Sadly it seems not. Maybe something that should be suggested to the team
I was trying to do something similar, i wanted the text to change color when hover the div.
searching in the docs i found the 'group' that helped me:
https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state
i tried different types of hover like:
hover:bg-green-600 text-gray-50
hover:[bg-green-600 text-gray-50]
hover:(bg-green-600 | text-gray-50)
Maybe you can try wrapping the button in a div and add the group class
my code before, did not work like this
<Link to='/home'>
<div className="p-2.5 mt-3 flex items-center rounded-md px-4 duration-300 cursor-pointer hover:(bg-green-600 text-gray-50)">
<span className="text-[15px] ml-4 text-gray-500 font-bold">Home</span>
</div>
</Link>
after using gruop
<Link to='/home' className='group'>
<div className="p-2.5 mt-3 flex items-center rounded-md px-4 duration-300 cursor-pointer group-hover:bg-green-600" >
<span className="text-[15px] ml-4 text-gray-500 group-hover:text-gray-50 font-bold">Home</span>
</div>
</Link>
with group when i hover the div it also change the span text color, like this the cursor don't need to be right on top of the word to make hover work.
but I still wish there was a way to put more than one class on the same hover, I hope they add it in the future...
hope it may help
I stumbled upon the same issue and was going to write a Tailwind plugin for that but it turns out that it's hard to mess with the rules they have set, you can only extend it by adding new variants and utilities but cannot do something like hover:(text-white bg-red-500).
However, I did find out about twin.marco that has this variant groups feature so check do check that out.
I am trying to style an HTML element inside the component from the Fluent UI React library.
What I want to do is put the "On" / "Off" text to the left of the toggle rather than on the left. When I look at my "compiled" code I can see that the component is translated into:
<div>
<label></label>
<div id="target-me">
<button>
<span></span>
</button>
<label></label>
</div>
</div>
I want to add an inline-flex to the target-me div and set flex-flow property to row-reverse in order to get the button element to the right of the label element. The problem is, I can't manage to target the "target-me" div in my code.
How can I achieve this without rewriting a custom component ?
Thanks!
Ok, well I found the answer to my own question so here it is:
<Toggle styles={{ container: { flexFlow: "row-reverse" } }} />
Essentially you can target different parts of the component (root, container, label..) by using the styles property. Use VS Code's Intellisense to find out what elements you can target inside the component and then just give it some regular CSS-in-JS that you want.
I have a loop where i display dynamically icons, the position of the icons are styled by css on style.css, but the classes name are actually an elements of json object.
The problem is how to use the value of the json element which is style in order to style the icons.
The *ngFor looks like this:
<div *ngFor="let count of counters; let i = index" class="{{count.style}} dispanserDiv ">
<span class="dispLabel"> {{count.name }}</span>
<img (click)="openStockModal(stockModal)" class="dispanser" src="../assets/icons/dispanserIcons/0.png">
</div>
also i tried [ngClass] but not working, any help is appreciate.
Well, after i opened the inspect element, and i hover over the tags i found on screen a title message with a direction arrow out of the height of the scree, so i changed the margin-top attr th icon appear again.
but i am pretty sure that when i set the class name without using the json element value, it display fine, but when i use the json element the icons appear at a different position, but i have no idea why this is happening. but it finally worked
I have finally figured out how to use the Twitter Bootstrap Tooltips, and I am trying to style it. I have asked similar questions about other plugins, and they all ended up being specific CSS selectors. For jScrollPane, the track's selector was .jspTrack.
Fiddle
My question is, what is the CSS selector for the Twitter Bootstrap tooltips?
The documentation linked in the comments shows you a sample of the markup that's produced when a tooltip is generated:
Markup
The generated markup of a tooltip is rather simple, though it does require a position (by default, set to top by the plugin).
<div class="tooltip">
<div class="tooltip-inner">
Tooltip!
</div>
<div class="tooltip-arrow"></div>
</div>
It should be fairly easy to determine the CSS selector based on this.
There are additional class names attached to .tooltip that you can see if you open your browser's DOM inspector and then hover your form element. The one in your example generates the following .tooltip element:
<div class="tooltip fade right in" style="…">
If you need to select only the tooltip belonging to a specific trigger element, that depends on where exactly the tooltip is placed in the DOM. The documentation says (just above the first section I quoted):
Usage
The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.
So the selector would be .mytrigger + .tooltip where .mytrigger is the form element triggering that tooltip. The DOM position is determined by the container option, otherwise it's the default as stated.
I am trying to use an icon-stack inside of a link. When I just use a single icon, everything works as normal. But when trying to use a stacked icon, it doesn't appear in the link like a single icon would.
The first method I am using is:
<span class="icon-stack"><i class="icon-circle icon-stack-base"></i><i class="icon-twitter"></i></span>tweetthis
Seen: Broken Stacked Icon
That gives me something where the two icons are both left-aligned (off center) and the icons appear over top of the text.
I had thought that including the span with the icon-stack class in place of a single <i> would be the way to do it, but it's not. This works fine:
<i class="icon-circle"></i><i class="icon-twitter"></i>tweetthis
Seen: Inline icons
I am not sure where to put the container <span>, or if there needs to be more styles added to it. I've tried various combinations. Setting the a to display:block doesn't help (there are no other styles applied to the link).
When there is no text in the link, the result is the same. Setting the .icon-stack container class to display:block does help it work, but it's not perfect since the base icon is so much bigger than the icon on top.
It this something that is possible? Or am I pushing the limits of how stacked icons should be used?
Here you go..
<a href="http://google.com">
<span class="icon-stack">
<i class="icon-check-empty icon-stack-base"></i>
<i class="icon-twitter"></i>
</span>
link text
<br/>
</a>
Span set to inline-block to ensure that the icon stays in place
body {
color:#00000;
}
a {
text-decoration:none;
color:inherit;
display:block;
}
span.icon-stack {
display:inline-block;
}
Demo: http://jsfiddle.net/aB4nU/1/
This is fixed in 3.2.1-wip branch. Or you can wait for the release tomorrow. :)