Using CSS @Variables
I would use a CSS preprocessor such as Sass or Less.
How to use CSS variables with Tailwind CSS
Assuming you have already added TailwindCSS to your project and that your CSS file is called global.css
.
First, you need to edit global.css
to look like this:
@tailwind base;
@tailwind components;
@tailwind utilities;
.root,
#root,
#docs-root {
--primary-color: #fff;
--secondary-color: #000;
}
And then, in order to be able to use them, you need to update tailwind.config.js
with the new CSS variables like so:
module.exports = {
theme: {
extend: {
colors: {
"primary-color": "var(--primary-color)",
"secondary-color": "var(--secondary-color)"
},
},
},
};
You can now use these variables as desired:
<div class="bg-primary-color">
<h1>Hello World</h1>
</div>
Creating CSS Global Variables : Stylesheet theme management
Latest Update: 16/01/2020
CSS Custom Properties (Variables) have arrived!
It's 2020 and time to officially roll out this feature in your new applications.
Preprocessor "NOT" required!
There is a lot of repetition in CSS. A single color may be used in several places.
For some CSS declarations, it is possible to declare this higher in the cascade and let CSS inheritance solve this problem naturally.
For non-trivial projects, this is not always possible. By declaring a variable on the :root
pseudo-element, a CSS author can halt some instances of repetition by using the variable.
How it works
Set your variable at the top of your stylesheet:
CSS
Create a root class:
:root {
}
Create variables (-- [String] : [value])
:root {
--red: #b00;
--blue: #00b;
--fullwidth: 100%;
}
Set your variables anywhere in your CSS document:
h1 {
color: var(--red);
}
#MyText {
color: var(--blue);
width: var(--fullwidth);
}
BROWSER SUPPORT / COMPATIBILITY
See caniuse.com for current compatability.
Firefox: Version 31+ (Enabled by default)
Supported since 2014 (Leading the way as usual.)
More info from Mozilla
Chrome: Version 49+ (Enabled by default).
Supported since 2016
Safari/IOS Safari: Version 9.1/9.3 (Enabled by default).
Supported since 2016
Opera: Version 39+ (Enabled by default).
Supported since 2016
Android: Version 52+ (Enabled by default).
Supported since 2016
Edge: Version 15+ (Enabled by default).
Supported since 2017
CSS Custom Properties landed in Windows Insider Preview build 14986
IE: When pigs fly.
It's time to finally let this ship sink. No one enjoyed riding her anyway. ☺
W3C SPEC
Full specification for upcoming CSS variables
Read more
TRY IT OUT
A fiddle and snippet are attached below for testing:
(It will only work with supported browsers.)
DEMO FIDDLE
:root {
--red: #b00;
--blue: #4679bd;
--grey: #ddd;
--W200: 200px;
--Lft: left;
}
.Bx1,
.Bx2,
.Bx3,
.Bx4 {
float: var(--Lft);
width: var(--W200);
height: var(--W200);
margin: 10px;
padding: 10px;
border: 1px solid var(--red);
}
.Bx1 {
color: var(--red);
background: var(--grey);
}
.Bx2 {
color: var(--grey);
background: black;
}
.Bx3 {
color: var(--grey);
background: var(--blue);
}
.Bx4 {
color: var(--grey);
background: var(--red);
}
<p>If you see four square boxes then variables are working as expected.</p>
<div class="Bx1">I should be red text on grey background.</div>
<div class="Bx2">I should be grey text on black background.</div>
<div class="Bx3">I should be grey text on blue background.</div>
<div class="Bx4">I should be grey text on red background.</div>
Parse Javascript variable to CSS variables
I think you're looking for something similar to this:
var parentElement = document.documentElement || document.body;
parentElement.style.maxWidth = parentElement.clientWidth + 'px';
parentElement.style.maxHeight = parentElement.clientHeight + 'px';
How to apply the styles for one variable
If you want to set CSS style for text-box(HTML - input type - text) using java script
Try this
<script type="text/javascript">
function changeStyle() {
var cssString = "css style";
document.getElementById("my_Element_id").style.cssText = cssString;
}
</script>
<input type="text" id="my_Element_id" />
<input type="button" value="Change" onlclick="changeStyle()" />
Replace css style to your actual style.
Related Topics
Definition List with Inline Pairs
How to Make The New Facebook Post Embed Feature Responsive
Place Custom Checkbox Icon to Right of Label Bootstrap 4
Right Aligning Cell Content in a Datatable Column
How to Make an Element with Fixed Position Relative to Its Parent, Not The Whole Screen
How to Apply Linear Gradient for Ie8
Highlighting All Rowspans Within a Table Row Using CSS Only
How to Change Active Link Color in Bootstrap CSS
Diamond Menu Items Using CSS and Svg
Remove The Random String Appended to Sprite Filename with Compass/Sass
Vertical Navigation with Rotated Text
Angular2 Module Level Stylesheets
Sticky Mdtoolbar Inside Mdsidenavlayout
Animating Elements Sequentially in Pure CSS3 on Loop
Disable HTML5 Video Download at CSS Breakpoint
Can Bootstrap 3 Grid Be Extended
Radio Buttons Show Unwanted White Background in Chrome. Firefox Is Fine