According to TailwindCSS Docs, you can specify color mode by document.body.addClass('dark') and use it on your CSS classnames like dark:text-blue-500.
But there is no option for adding new color modes, i want something like evening, midnight. Any ideas how to implement different color modes without going too much into it?
The most logical way i can think is create a ColorModeContext and export my components according to context but it is kinda hardcoded.
Tailwind 3.1 now includes arbitrary variants which, along with the addVariant plugin, can be used to create custom color modes. Using the css * selector, you can apply a class like evening to an element, and all its children will have apply evening: ... styles.
tailwind.config.js
let plugin = require("tailwindcss/plugin")
module.exports = {
// ...
plugins: [
plugin(function ({ addVariant }) {
addVariant('evening', '.evening *')
addVariant('midnight', '.midnight *')
})
]
}
pages/[some-page].jsx
<div className="evening">
<div className="text-blue-300 evening:text-blue-500"></div>
</div>
Related
I'm trying to make a react component that changes the width from a parameter but it's doesn't work and I don't know why.
function Bar() {
const p =80
const style = `bg-slate-500 h-8 w-[${p.toFixed(1)}%]`
console.log(style)
return (
<div className=' h-8 w-full'>
<div className={`bg-slate-500 h-8 w-[${p}%]`}>
</div>
</div>
)
}
export default Bar
With this code I get a full-size bar, but if I use a strict String with 80.0 it works fine
The other answers are wrong. In Tailwind V3 JIT is included and you won't need to set mode to jit anymore. And even in Tailwind V2 the posted code wouldn't work.
Following the docs, you must avoid string interpolation and use complete class names.
This is wrong:
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
Instead use Complete class names:
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
What about using inline styles?
You may be tempted to use inline styles, but remember Content Security Policies are increasingly under scrutiny to disallow unsafe inlines. Any inline style or script could in theory be injected with unintended content. Furthermore, the whole point to Tailwind is to generate CSS at build time, so you'd be working around it and might as well not even be using it in this case.
in tailwind.config.js add mode: 'jit'.
I would suggest https://v2.tailwindcss.com/docs/just-in-time-mode to learn more.
e.g:
module.exports = {
//other options
mode: 'jit',
}
I ran into a similar issue building a site with Astro & Tailwind.
The solution I discovered was to use the 'safelist' feature that allows you to define certain classes that will be force-compiled, regardless of whether or not they are found when scanning the specified content locations in the tailwind.config.cjs file.
An example of the code I used to fix my situation:
module.exports = {
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
Adding a safelist and classes to it:
safelist: ["lg:grid-cols-[1fr_4fr]", "lg:grid-cols-[1fr_3fr_1fr]"],
...
Here's a link to the relevant area in the Tailwind documentation.
If your p's value is a constant that will be used across the app, you can instead define it in your tailwind.config.js file like this.
theme: {
extend: {
spacing: {
"p-value": "80%",
},
},
}
Then you can modify your code to this.
<div className="bg-slate-500 h-8 w-p-value">
Include mode: 'jit' in tailwind config file
Is it possible for the filter property, applied to a styles object in React to have multiple filter values set?
saturation = 25;
blurAmount = 5;
brightness = 25;
opacity = 0.85;
let styles = {
backgroundImage: `url(${imageUrl})`,
WebkitFilter: `brightness(${brightness}%) saturation(${saturation}%) blur(${blurAmount}px)`,
filter: `brightness(${brightness}%) saturation(${saturation}%) blur(${blurAmount}px)`,
opacity: opacity
};
In the code above, only the opacity and backgroundImage properties get set correctly when I add the inline style to my component.
React does not support all the CSS properties so my best suggestion is you can use 3rd party library like this one https://github.com/iyegoroff/react-native-color-matrix-image-filters#supported-filters
checkout this lib I think this will help you.
I a solution I found was to give the element an ID, and set the ID to something that's associated with the color.
Example:
<img id={Log.serv} src="RadioWaves.png"/>
Log is a variable, that has dynamic input. Serv being severity (the color).
Now what you can do is on a CSS sheet, you can apply the filter to elements that have that ID.
Example:
#AllSystemsGo{
filter: invert(95%) sepia(79%) saturate(992%) hue-rotate(33deg) brightness(103%) contrast(98%);
}
You could substitute an ID with a separate classname, either way, works. I did not want to install a separate lib, so this what I came up with.
Its been 2 whole days i can't find any solutions.I have no solutions yets:( I'm having color states. I'll select from color picker a color, I'll update that particular color state:
Requirement is if I pick from color picker it must be passed from react js property or variables to scss variable n override them. it must be done via reacrjs to scss if it can be done from js to css then it can be done from reacr js to scss whats that one thing which m missing on it.
App.js
{
primary: '#1976D2',
secondary: '#424242',
accent: '#82B1FF',
error: '#FF5252',
info: '#2196F3',
success: '#4CAF50',
warning: '#FFC107'
}
ex: primary: '#1976D2' I'll pick in update to primary: '#ffffff' something like:
App.js
changeColor(e){
this.setState({primary:e.target.value}) // the value is updated to #ffffff
}
Now, I need to pass this.props.primary to .scss something like:
variables.scss
$primary:this.props.primary
login.scss
.btn{
background-color:$primary
}
my need is it must be dynamic if i pick from color picker it must be passed from react js property or variables to scss variable n override them
We can do it inline styling but I wanna do it the way defined above (via .scss).
Is it possible?or is the any better way?
something like this
https://vuetifyjs.com/en/style/theme
vuejs uses theme thats overides to scss variables
Vue.use(Vuetify, {
theme: {
primary: '#3f51b5',
secondary: '#b0bec5',
accent: '#8c9eff',
error: '#b71c1c'
}
})
can anyone please explain me how they r doing I'm not understanding
First. Just to clarify. You are not able to change SASS variables from browser. Because how it works: SASS code -> compiled into CSS -> CSS is sent from server to browser -> . So we actually should searching "how to override by JS something that was SASS variable in consistent way".
The only way I see doing that is using CSS custom properties. Take a look into spec to understand their caveats(e.g. it cannot be used as part of size value in #media) and about support in browsers.
I'm not really sure if SASS supports compiling variables into CSS custom properties. Take a look into css-vars mixin. With using
$css-vars-use-native: true;
you will get your variables exported as CSS custom properties. Unfortunately it means you need to change you existing styles to use var() from mixin for variables you want being able to override later
Then your code will be able to override any of custom properties as easy as
document.body.style.setProperty('--primaryColor', myColorValueFromDatePicker)
Take a look into fine and short article on how to change custom properties with JS
NB since custom properties uses the same cascade approach as any CSS you additional get ability to apply changed value on any part of DOM:
document.querySelector('#previewBlock').style.setProperty(....);
I would use Styled Components instead. There you can pass your styling by props
https://www.styled-components.com/docs/advanced
I want to override vuetify variables with custom colors by following this
I've created a stylus folder which contains base folder (_colors, _typography) and main.styl file. The _color file is imported into main.styl file, which the latter is imported into main.js
Here is my file structure:
And the imports are included in main.js:
import '../node_modules/vuetify/dist/vuetify.min.css'
import './assets/stylus/main.styl'
Inside the _color.styl, I have this test code:
$red = {
"base": #FF0000,
"darken-1": #e50000,
"darken-2": #990000,
"darken-3": #7f0000,
"darken-4": #000000,
}
The custom colors aren't showing...am I missing something here?
As #webdevdani mentionned it, I don't think overriding vuetify style is possible.
I propose you a workaround : use a theme.
In your main.js you can set colors, like this :
Vue.use(Vuetify, {
theme: {
primary: '#FFA726',
secondary: '#29B6F6',
anyColor: '#0000'
}})
And you'll be able to call it like this in any of your app's component :
color="primary"
or
color="anyColor"
Source and more info about Vuetify theme
You need to declare the variables before importing Vuetify. Switching the order of imports should work, assuming that main.styl imports your modified _color.styl.
Quote from the documentation:
Now that stylus is configured, you can set default values for the stylus variables that you wish to change. These must be declared before the import and will automatically override the Vuetify defaults.
You can see all the variables you can change in here.
My problem is that CK Editor is detecting and adding css classes from my main style sheet (in the parent page), which is causing the Styles combo to display unnecessary and undesirable styles in a very long list.
I want to remove the styles that are being automatically added to the stylescombo.
I want CK Editor to ONLY display the styles I define in the config and none of the default or parent styles.
I have tried various techniques from the docs and from S.O., but it does not seem to work.
CKEDITOR.editorConfig = function (config) {
// I thought this is how you use the stylescombo plugin but it does nothing
config.stylesSet = 'custom:/ckeditor/styles.js';
config.stylesCombo_stylesSet = 'custom:/ckeditor/styles.js';
//I want only this style to display in the Styles combo.
//This does get added, but with all the other junk styles I do not want.
config.stylesSet = [
{ name: 'Bolder', element: 'span', attributes: { style: 'font-weight:bolder'} }
];
};
I am using CK Editor 4 and the stylescombo plugin.
Apparently you mistakenly included stylesheetparser plugin in your build so this may help:
config.removePlugins = 'stylesheetparser';
Or you can build a new CKEditor package without this plugin.