Is it possible to use Tailwind's bracket notation inside the not-prose class?
<div className="not-prose">
<hr className="mb-[theme(spacing.10)]" />
</div>
Edit: not-prose is a class provided by Tailwind to undo typography styles set in the Tailwind config.
Related
I am trying to add a different margin for large screens, and my breakpoints are not working. They work elsewhere except in this specific component.
My React.js component:
<Link to={`/dashboard/files/${name}`} className="hover:text-black">
<div className="bg-white h-24 w-28 rounded-2xl m-2 sm:m-4 inline-block p-1.5 cursor-pointer hover:shadow-md">
<div className="h-16 w-20 m-auto"> {icon} </div>
<Para content={name} />
</div>
</Link>
The m-4 class is being overridden by a value in _spacing.scss. I don't know what that file is or where it comes from. It's overriding the m-2 class with !important.
Have you tried overriding the value from the external SCSS file by adding your own "important" modifier? The exclamation point should be placed after the breakpoint variant value. For example:
<div className="sm:!m-4 ..." />
See: https://tailwindcss.com/docs/configuration#important-modifier
If you run into a lot of problems with SCSS overrides and want to ensure that your Tailwind utility classes always apply, you could instead add the important option to your tailwind.config.js:
module.exports = {
important: true,
}
I have several message boxes and each box has a data-author attribute.
If I want to apply styles to these message boxes in CSS, I can just do:
[data-author="Ben"] {
background-color: blue;
}
But I'm not sure how to do this with Tailwind CSS or whether it's even possible. Any idea?
Thanks
You can do this by adding a variant. In your tailwind.config.js:
Add const plugin = require('tailwindcss/plugin') at the top of the page.
Then in your export add:
plugins: [
plugin(({ addVariant }) => {
addVariant('ben', '&[data-author="Ben"]')
}),
]
All you have to do is then use it how you want: ben:bg-blue-500
You would need to create a new one for each individual author though, or come up with a convention for grouping them by colors.
Updated answer as of 2022/10/30
As of Tailwind v3.2, data attribute variants are supported.
<!-- Will apply -->
<div data-size="large" class="data-[size=large]:p-8">
<!-- ... -->
</div>
<!-- Will not apply -->
<div data-size="medium" class="data-[size=large]:p-8">
<!-- ... -->
</div>
See here: https://tailwindcss.com/blog/tailwindcss-v3-2#data-attribute-variants
you can use the syntax you used above. for implementation problems, you can use the #apply directive which can directly call the utility class from tailwind
In addition, you can also apply a color that is outside the tailwind color by using an arbitrary value
[data-author="Ben"] {
#apply bg-[#bada55];
}
You can learn more about arbitary value in this article:
https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values
This isn't possible with tailwind, you can only target elements by giving them classes. However, you can still write custom CSS and add styles to it with tailwind's #apply:
[data-author="Ben"] {
#apply bg-blue-500;
}
I think you are looking for the best syntax for state selection:
<a class="bg:blue[data-author=Ben]" data-author="Ben">Ben</a>
All native CSS selectors can be applied:
<button class="opacity:.5[disabled]" disabled>Submit</button>
It's enabled with zero configuration and the syntax is very similar to native CSS.
https://tailwindcss.com/docs/background-image#arbitrary-values
this is how I want to use Tailwind bg-image feature. This does not work using SvelteKit next 160 and Tailwind 3.0.9.
Code:
<script>
import globe from '$assets/bg/bg_globe2.png'
</script>
<div
class={`flex flex-col bg-primary-dark h-64 overflow-hidden bg-no-repeat bg-[right_-14rem_bottom_-10rem] bg-[url('${globe}')]`}
>
//children
</div>
the bg-[right_-14rem_bottom_-10rem] class works without problems, so I assume Tailwind has problem with Svelte file paths?
EDIT:
output from console.log(globe) is src/assets/bg/bg_globe2.png.
❌ Arbitrary values cannot be computed from dynamic values
<div class="bg-{ userThemeColor }"></div>
✅ Use inline styles for truly dynamic or user-defined values
<div style="background-color: { userThemeColor }"></div>
https://v2.tailwindcss.com/docs/just-in-time-mode#arbitrary-value-support
Tailwind needs to find the full text value in your code to be able to generate the utility classes.
There is a React component using Emotion called OtherComponent:
OtherComponent:
...
return <div css={otherComponentStyles}>
<div className='something'>
</div>
</div>
And another component called MainComponent that uses OtherComponent:
MainComponent:
...
return <OtherComponent css={mainComponentStyles} ... />
What happens in this situation is that OtherComponent properly uses otherComponentStyles. But it ignores mainComponentStyles.
But what I would like to do is to apply style to OtherComponent from the level of MainComponent.
I know i can wrap OtherComponent into a div, ad set css=... to the div. But it is a nasty fix of the problem.
Hence the question: how to apply CSS with Emotion from parent component aka MainComponent?
You are not applying those styles to any html tag, it's not <OtherComponent> which is rendering, it's the <div> which is rendering to the page, so you must apply styles to a valid html tag.
Lift framework seems to use class="lift:something" in HTML tags but what if I want to apply some ordinary CSS to this tag and want it to have an ordinary class name?
Each HTML element can have multiple classes separated by spaces, e.g.
<div class="lift:something something-else"></div>
You can target one or more of those classes in your stylesheet.
If Lift doesn't let you apply your own classes to elements (I'm not a Scala programmer), you may need to apply classes to other elements instead, like wrapper divs, and select based on those:
<div class="something">
<div class="lift:something"></div>
</div>
you can use many classes in dom elements:
<div class="lift:something my_extra_css_class">
Or, if the styling is meant to be unique, you can use an id and style the id and not the class:
html:
<div class="lift:something" id='my_id'>
css:
#my_id{
bla: blabla;
foo: bar;
fruit: banana;
codfish: sausage;
car: garage;
cash: atm;
}