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.
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'm using tailwind css to style a little angular app, the problem is:
i want my form to have a fixed position at the bottom of the page but it seems that classes like "top-100 left-50" are not working
home-component.html
<main class="container bg-green-200 h-full m-auto">
<app-search class="fixed top-100"></app-search>
<app-fruits-cards></app-fruits-cards>
</main>
searchbar-component.html:
<form *ngIf="searchForm" [formGroup]="searchForm" (ngSubmit)="onSubmit()" class="bg-slate-100 rounded p-3">
<label for="searchInput">Search</label>
<input formControlName="fruitName" type="text" id="searchInput" class=""/>
<button type="submit" class="rounded-full">search</button>
</form>
I actually tried to use the "top-100" class into the form element directly but it still doesn't work, what am I doing wrong here?
Try adding position relative to the container
Also i'm not sure about top-100 ...
check here what values are allowed with the classes of top ..
https://tailwindcss.com/docs/top-right-bottom-left
There is no default defined class top-100 the most near to it is top-96 but you can define your default in tailwind.config file or use custom value like top-[100px]
Read about:
Adding arbitrary values here: https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values
Defining classes in the config file here: https://tailwindcss.com/docs/configuration
I'm upgrading my company AngularJS project to Angular 8 thanks to ngUpgrade. So I have a hybrid application with both angularjs and angular components. I am also using an angular material template that provides SCSS files for both angular and angularjs.
My problem is that I want to only use the ajs theme on ajs component and the angular theme on angular components (and they can also be nested).
I searched a way to apply only one global css when a specific class is applied and switch to another global css when another class is applied.
I cant really do css lazy loading in this case
Lets assume my app code looks like this :
<div class="theme-1">
<div>Some stuff that should get theme 1 CSS</div>
<div class="theme-2">
<div>Some stuff that need ONLY theme 2 CSS</div>
<div>without theme 1 CSS</div>
<div class="theme-1">
<div>Switching back to theme 1</div>
</div>
</div>
</div>
I want to be able to switch between theme when a class theme-1 or theme-2 occurs.
you should use BEM approach for this and your code should be like this.
.theme-1 {
&__div1{...}
&__div2{...}
...
}
.theme-2 {
&__div2{...}
...
}
.theme-1,
.theme-2 {
/* Common Css */
&__div1{...}
&__div2{...}
...
}
so you can write classes like this now
<div class="theme-1__div1">
<div>Some stuff that should get theme 1 CSS</div>
<div class="theme-2__div1">
<div>Some stuff that need ONLY theme 2 CSS</div>
<div>without theme 1 CSS</div>
<div class="theme-1__div2">
<div>Switching back to theme 1</div>
</div>
</div>
</div>
for BEM you can refer this link - http://getbem.com/naming/.
If you are still not clear, I can provide same code also.
Let me know if you have any doubt.
The solution in my case was to use encapsulation: shadowDow on my angular components. It allowed me to reset theme1 css and use only theme2 css.
I had t do lots of css tweaks (some angular material features doesn't work with shadowDom...) and an cant switch back to theme1, but it has been the best solution so far.
I'm using styled-jss in my app. During development it compiles my components to ugly classnames and I see this in my Web Inspector
<div class="div-2-0-1-1">
<div class="div-3-0-1-2">
<div class="div-4-0-1-4">
<div class="div-5-0-1-5"></div>
<div class="div-6-0-1-6"><textarea class="textarea-7-0-1-7"></textarea></div>
<div class="">
<div class=""><input class="input-8-0-1-8"><input class="input-9-0-1-9"></div>
</div>
</div>
</div>
</div>
I'd rather want to see component names in my classnames. I've set mode: 'development' in my webpack.config.js but this didn't help. Is there something I can do about it?
Automated way to do that would require to build a babel plugin that would take the variable/identifier name and pass it to the styled function and later use it as part of the className. This doesn't exist yet and we are working on a new version here if you want to follow https://github.com/cssinjs/jss/pull/1094
Because Bootstrap 4 uses SASS for components like cards, I'm having trouble overriding it in CSS since I haven't used SASS before.
I see ways to override configuration files in a server node.js environment, but for a basic index.html file linked to Bootstrap and a custom CSS file, how do you go about setting margin bottom to 0?
HTML here:
<div class="card mb-3" id="sheet-footer">
<div class="card-header text-center">`=
<h3 class="card-title">
Content
</h3>
</div>
</div>
Chrome dev tools show the following:
.mb-3, .my-3 {
margin-bottom: 1rem!important;
}
Any attempts to override margin-bottom (even with the terrible HTML style tag) don't beat this rule - what's the proper way to override this?
Thanks in advance.
If you don't want a margin bottom remove the class mb-3
If you only want a margin bottom on specific breakpoints bootstrap 4 allows mb-md-3
see https://getbootstrap.com/docs/4.0/utilities/spacing/