Is there a way to disable Tailwind's Preflight on a specific div or component? For example a WYSIWYG editor, or wanting to migrate gradually to Tailwind.
Search about 'unreset tailwind'.
https://www.swyx.io/tailwind-unreset/
download file unreset.scss from https://raw.githubusercontent.com/ixkaito/unreset-css/master/_unreset.scss
copy it over to your tailwind.scss and namespace it under an unreset class.
.unreset { // paste unreset.scss here! }
And then in your JSX, you can add that unreset class in:
div className="unreset" dangerouslySetInnerHTML={{ __html: post.contents }}
https://www.youtube.com/watch?v=iLEYtgBezhs
I believe the optimal method, if you're using it for basic markdown is to use the the #tailwind/typography package which will allow tags such as <h6> <b> etc...
run npm i #tailwindcss/typography
add require("#tailwindcss/typography") to your plugins in tailwind.config.js
add the className prose prose-lg
<div className="prose prose-lg" dangerouslySetInnerHTML={{ __html: markdownDesc }} />
Found this method in a article here:
https://tjaddison.com/blog/2020/08/updating-to-tailwind-typography-to-style-markdown-posts/
As far as i know it will always load the ui if can find similar classes. Some solution can be
Reducing its priority from other css, by putting it earlier from other css files in initial load.
you can config tailwind.config.js file in a way so that it only generates css that needed
wrapping css with extra identifier so that it can't collide with tailwind classes.
Another option is:
.element-selector {
all: revert;
}
all can set all properties of the element to the initial, inherit or revert value.
More info here: https://developer.mozilla.org/en-US/docs/Web/CSS/all
Related
I have seen similar questions but solution suggests to change it through css.
I tried but unable to reproduce the solution for my code. Currently link is looking like this
I also explored react-bootstrap docs but hey haven't mentioned any specific tag to remove that styling
I want to remove that Blue Under Line.
Code :
<ListGroup.Item>
<Link to={`/panelmember/${item._id}`}>
<Card.Title as="h2">
<strong>{item.name}</strong>
</Card.Title>
</Link>
</ListGroup.Item>
Is there Any way to add Short code inside the <Link> tag ? Or if we have to customize it in index.css then can you suggest any solution.
.links {
text-decoration: none;
}
<Link className={`links`} to={`/panelmember/${item._id}`}>
<Card.Title as="h2">
<strong>{item.name}</strong>
</Card.Title>
</Link>
Like this
Bootstrap 4 makes use of Sass for its styling (Sass is a pre-processor scripting language that is interpreted or compiled into Cascading Style Sheets - see https://sass-lang.com/). See https://getbootstrap.com/docs/4.0/getting-started/theming/ for details on Bootstrap theming.
If you are using Sass to compile your CSS file, you can override the default Bootstrap styling for links (which is underline) by adding the following to the scss file (before importing bootstrap):
$link-decoration: none;
How does one add a css class to a Link component in Next.js?
<Link
className="app-subnav__link"
href="/globalSettings"
>
Settings overview
</Link>
It doesn't like the above! ES Link is throwing an error:
Try this (available in NextJS v13):
<Link href="/globalSettings" className="app-subnav__link">
Settings Overview
</Link>
Reference: https://nextjs.org/docs/api-reference/next/link
Update: in NextJS v13 The next/link child can no longer be . Add the legacyBehavior prop to use the legacy behavior or remove the to upgrade. A codemod is available to automatically upgrade your code.
In next version 13 you can use it directly in the Link component. Here is no need to include the a tag.
apply the style to "a" also work for me
parentElement {
a {
padding:10px
}
}
enclose link inside a <div> . Apply className in the <div> . This might not be the right way to do it but it works
I'd like to ask for a little nudge to get my brain out of the box I got it into.
Context
Angular 4 using Angular CLI and AoT.
All methods mentioned in https://angular.io/docs/ts/latest/guide/component-styles.html describe ways to set complex CSS of a component while it is being written by a developer.
After a component is created, Angular allows to adjust individual styles and even assign various CSS class names to tags in the component as you please, all that using [ngClass], <div [class.something]="condition">, various #HostBinding decorators and some other methods.
However, none of the above can change the CSS declaration the component is using. The methods above can either (a) use what is already available in the stylesheet defined by the developer or (b) set individual CSS properties to individual HTML tags in the component's template.
Question
How would I update the CSS for the whole component on runtime so that all elements in that component respond to the new CSS?
Say I introduce a new style for a div.someClass and I want all matching elements div.someClass to reflect the new style.
Plunker
A showcase of my attempts is here: https://plnkr.co/edit/N2C40cSb7hd1AyOxWWdT
The button should be red, based on the value of MyChildComponent.styles
I think I understand why it doesn't work the way I would expect: shortly said, styles are built in the component during compilation, not runtime, including those found inside <style /> tags in the template.
But knowing why it doesn't work doesn't help me to make it work.
Any help highly appreciated.
Solution 1
Inserting a new css class is not possible ( as far as i know ) but you can insert css properties to your component dynamically.
I modified your dynamicStyles() to this
get dynamicStyles(): any{
return {'background': 'red' };
}
that returns an object instead of string because you will pass this object to ngStyle of your button.
In your template, I change the button like this
<button type="button"
[ngStyle]="styles">
Button
</button>
Here's a plunkr
Solution 2
This is something that I would not recommend but in your case it might be useful. You can add this
encapsulation: ViewEncapsulation.None
and the import
import {ViewEncapsulation} from '#angular/core'
to your #Component.You can leak your component's css so that you can use it on your child component. Then in your child component, add a [ngClass] in your button so that you can just pass a variable via #Input() if it should be red.
<button type="button"
[ngClass]="{'redButton': isButtonRed}"
>Button</button>
And in your style.css
.redButton{
background:red;
}
And in your main component.
<div>
<h2>Hello name</h2>
<my-child [isButtonRed]="true"></my-child>
</div>
Here's another plunkr
Hope this helps.
I have the following form component:
<template>
<div>
<form>
<input placeholder="Recipe Name">
<textarea placeholder="Recipe Description..." rows="10"></textarea>
</form>
</div>
</template>
<script>
export default {
name: 'AddRecipeForm'
}
</script>
<style scoped>
form {
display: flex;
flex-direction: column;
}
</style>
The <style> uses the scoped attribute.
When applied, the CSS does not get loaded in. When scoped is removed, it does get applied.
However I want to keep it local to the component.
Why is the CSS not getting applied when the scoped attribute is present?
It appears this was solved by doing a full-reload of the page. Hot reload should take care of scoped css.
However for future viewers, This is commonly asked when scoped CSS isnt being applied to a child component. This can be solved by using deep selectors. (e.g: Using a .selector >>> .desired-selector {})
EDIT: Since this is still getting activity, I'll bring my comment into the answer. ::v-deep also works depending on what preprocessor you're using.
Vue 3 Edit
Now that Vue 3 is stable and been in full release for a while, see the Vue 3 docs for deep selectors: https://vuejs.org/api/sfc-css-features.html#scoped-css
Namely, this syntax is now: :deep(.some-class). There are also some new features which can be read in the linked docs above.
For some reason, scoped styles don't get applied during hot reload when they are first added to the component. Full page reload fixes the issue, from there the styles, since they have been detected, get updated with consecutive hot reloads.
Precisely same symptoms as the OP but none of the recommendations here so far have worked and I need to move on so our solution is to rely on CSS selectors normally:
add a uniquely-named class to the top-level element below <template>
prefix all scoped (non-global) selectors with that uniquely-named class
which had the unexpected but welcome upside when live-debugging our CSS is that the origin of the CSS rule is now obvious in devtools.
MyComponent.vue
<template>
<v-card class="MyComponent" ... >
<div class="fancyBox" ... >
/* ... */
</v-card>
</template>
<style>
.MyComponent .fancyBox { /* scoped to any MyComponent instance */ }
.globalBox { /* we wouldn't put a global style here, obv */ }
</style>
Yes, it's a pain to prefix component-scoped styles this way, but, at least it's a familiar thing to do and you get the added benefit in devtools of tracing the source of a style back to the component that declared it.
Caveat is that, of course, parent-scoped CSS will also bleed down to child-scopes. This, at least, is familiar CSS behaviour.
Rebuilding the Vue App by running 'yarn serve' has fixed the problem for me.
I created a simple React app using https://github.com/facebookincubator/create-react-app.
I am trying to specify a configurable URL to a component's CSS like this:
.Cell {
background-image: url({process.env.REACT_APP_STATIC_URL}./someImage.png);
}
And here's the component:
import React from 'react';
import './Cell.css'
class Cell extends React.Component {
render() {
return (
<div className="Cell">
{this.props.name}
</div>
);
}
}
But it doesn't look like the process variable trickles down to the imported CSS. How would I go about doing this?
If you want to use js variables in CSS, try React inline-style instead of plain css file.
https://facebook.github.io/react/tips/inline-styles.html
If you want to separate CSS and JS, you might need a CSS preprocessor to manage your global variables.
I came across one such scenario, The method I used is instead of adding it as background in CSS, make an img element and assign the path as src in component itself. I don't think there is any other way of doing that.
Commenting on this as I've recently had a similar issue. This should work to send an image file as a CSS variable in a build.
use the style prop to invoke a CSS style
Use template literal around the url() value
use the Javascript require() to refer to the file in the final build pack. Using a relative url requires that you call the image relative to where the the page will be called instead of being relative to the component JS file.
In the React component, use the inline style prop to set the CSS variable:
<div
style={{"--img":`url( ${require("../../images/coding.jpg")})`}}>
</div>
in the CSS file:
background-image: var(--img);