We Keep Coding

Color classes of Tailwind CSS not working when appended

There is a login page that is built with Tailwind CSS v3, all the styles for nice and fine. But on the login page, I want to have timer alerts that will display if any error occurs like invalid email, email already in use like that way.
What is done:
So I created a <div id="su-error-container"> in the login page just above the submit button which will be empty by default, whenever an error occurs, js creates an element and appends it to the div present with Tailwind CSS classes in it.
But the problem is, classes like padding, margin, text size and all work fine, but text-color, bg-color classes do not work.
Code:-
parentElement = document.querySelector("#su-error-container");
alertMainDiv = document.createElement("div");
alertSpan = document.createElement("span");
alertMainDiv.className = "mb-10 bg-red-500";
alertSpan.className = "font-medium";
titleTextNode = document.createTextNode(title);
messageTextNode = document.createTextNode(message);
alertSpan.appendChild(titleTextNode);
alertMainDiv.appendChild(alertSpan);
alertMainDiv.appendChild(messageTextNode);
parentElement.appendChild(alertMainDiv);
Element copied from Dev Tools Chrome:
<div class="mb-10 bg-red-500"><span>Sign Up Error: </span>Invalid Email Address</div>
Other classes work, but colour classes, comment if any extra info is needed!
tailwind.config.js
module.exports = {
content: ["./*.html", "./assets/**/*.js"],
theme: {
screens: {
sm: "540px",
// => #media (min-width: 576px) { ... }
md: "720px",
// => #media (min-width: 768px) { ... }
lg: "960px",
// => #media (min-width: 992px) { ... }
xl: "1140px",
// => #media (min-width: 1200px) { ... }
"2xl": "1320px",
// => #media (min-width: 1400px) { ... }
},
container: {
center: true,
padding: "16px",
},
extend: {
colors: {
black: "#212b36",
dark: "#090E34",
"dark-700": "#090e34b3",
primary: "#3056D3",
secondary: "#13C296",
"body-color": "#637381",
warning: "#FBBF24",
},
boxShadow: {
input: "0px 7px 20px rgba(0, 0, 0, 0.03)",
pricing: "0px 39px 23px -27px rgba(0, 0, 0, 0.04)",
"switch-1": "0px 0px 5px rgba(0, 0, 0, 0.15)",
testimonial: "0px 60px 120px -20px #EBEFFD",
},
},
},
variants: {
extend: {},
},
plugins: [],
};

So I figgered out what was the problem.
So starting with how tailwind works.
When we use any classes in tailwind, not all the classes of tailwind is loaded.
Tailwind scanned the files and only loads the classes which have been used in the files.
In my scenario, I was appending the alert with classes like bg-red-300 or text-red-500 which were not used in the whole project anywhere.
So this means Tailwind CSS didn't load this classes in the CSS file hence the color classes didn't worked.
Solution:
I created a hidden div in index.html which contained a div where these classes were used and as this div having class hidden it was not visible to user and Tailwind when scanning the files, adds this classes to the CSS file which is to be served, hence now when alert is appended in the Sign Up page, it works perfectly fine!

You're mixing up some things here. First, regarding this line:
alertMainDiv.className += "mb-10 bg-red-500";
Knowing that you created the element just before, you should assign the className using the = operator, not appending operator +=.
Then, regarding this line:
alertSpan.class = "font-medium";
As you can read in the docs, you should use the className DOM property instead (which you used already one line above):
Note: The class is an HTML Attribute, while the className is a DOM Property.
Correct assignments
alertMainDiv.className = "mb-10 bg-red-500";
alertSpan.className = "font-medium";

ExtJS 6.2.1 - How to change the UI of Ext.toast()?

Hi all and thank you for your time!
I was wondering how one could to change the UI of the ExtJS 6.2.1 Ext.toast()...
For example I would like to have toasts with a red(ish) border to inform the user when a error occurs, and green(ish) when an operation was successfuly completed, and the normal theme color for all other notifications, for example...
Could you please guide me to the correct code on how to do this?
Thanks in advance!

Tested on ExtJS 7. I Guess it works on 6 as well.
Create an override scss file:
/packages/local/yourtheme/sass/src/window/Toast.scss
Inside:
$toast-red-color: #ffe0db;
$toast-yellow-color: #fff8d2;
$toast-green-color: #efffd2;
$toast-font-weight: 600;
// Red
#include extjs-window-ui(
$ui: 'red-toast',
$ui-header-background-color: $toast-red-color,
$ui-border-color: $toast-red-color,
$ui-header-border-color: $toast-red-color,
$ui-body-border-color: $toast-red-color,
$ui-body-background-color: $toast-red-color,
$ui-body-font-weight: $toast-font-weight,
$ui-border-width: 5px,
$ui-border-radius: 5px,
$ui-header-color: $toast-red-color
);
// Green
#include extjs-window-ui(
$ui: 'green-toast',
$ui-header-background-color: $toast-green-color,
$ui-border-color: $toast-green-color,
$ui-header-border-color: $toast-green-color,
$ui-body-border-color: $toast-green-color,
$ui-body-background-color: $toast-green-color,
$ui-body-font-weight: $toast-font-weight,
$ui-border-width: 5px,
$ui-border-radius: 5px,
$ui-header-color: $toast-green-color
);
// Yellow
#include extjs-window-ui(
$ui: 'yellow-toast',
$ui-header-background-color: $toast-yellow-color,
$ui-border-color: $toast-yellow-color,
$ui-header-border-color: $toast-yellow-color,
$ui-body-border-color: $toast-yellow-color,
$ui-body-background-color: $toast-yellow-color,
$ui-body-font-weight: $toast-font-weight,
$ui-border-width: 5px,
$ui-border-radius: 5px,
$ui-header-color: $toast-yellow-color
);
/* Global changes */
.#{$prefix}toast {
#include box-shadow(rgba(0,0,0,0.0) 0 0px 0px);
.x-window-body-default {
// More specific changes, if needed
}
.x-autocontainer-outerCt {
// More specific changes, if needed
}
}
In this case, you'll have 3 ui's that you can use like this:
Ext.toast({
html: 'This is an example',
title: null,
align: 't',
ui: 'yellow-toast'
});

Ext.Toast resp. Ext.toast is basically an Ext.Panel. My first approach was to try and create a ui with the panel-ui mixin. Apparently, this did not work. A working solution instead is to create a Toast instance with a base CSS class, e.g. like this:
var t = Ext.create('Ext.Toast',{cls: 'mytoast',timeout: 2000});
t.show({message: 'foo'});
Then, define the .mytoast css class, e.g. in sass/etc/all.scss:
.mytoast {
border: 2px solid red;
}
This seems to work, even if it feels a bit "off the Ext way".

CSS transitions & timing seem off

First I am open to any ideas / suggestions. I desire to keep the home page as is as far as using the variety of scenic images. The problem I run into is of course what is readable font color on one image is not very readable on another. So I googled some ideas and found a darkened area / backdrop to be the most professional. Great now it works well for all light images but not dark images. So I came up with the idea of switching font color and background depending on the image (dark or light). The trouble I am having is that the font / background switch about 1-2 seconds before the image does??? Further I think I would like to add a cross fade or some animation effect to make the switch soother. Here is the site:
http://alexandredairy.com/staging/
Again I am open to any ideas / suggestions
So the first thing I did was to name the images with a dark or light prefix so the css can switch accordingly. So I have twenty or so images named like so:
Dark_Cover1_PastrDairy.jpg or Light_Cover1_PastrPoultry.jpg
My CSS is:
/*Back ground shading so we can read text*/
.lighttextbackground
{
color:#000;
background-color:rgba(255, 255, 255, 0.35);
box-shadow:0px 0px 10px 10px rgba(255, 255, 255, 0.35);
}
.lighttextbackground a
{
color:#000;
}
.lighttextbackground p
{
color:#000;
}
.darktextbackground
{
color:#fff;
background-color:rgba(0, 0, 0, 0.35);
box-shadow:0px 0px 10px 10px rgba(0, 0, 0, 0.35);
}
.darktextbackground a
{
color:#fff;
}
.darktextbackground p
{
color:#fff;
}
A typical HTML element that I want the effect on is:
<div id="pageslogan" class="slogan lighttextbackground">
....code...
</div>
As for the jquery I am posting just the function(s) I think relevant. I can definately post more if needed or you can browse the site and get everything using developer tools (F12).
function changeImageHandler(){
var imgSRC;
$("#inner ul>li").eq(currImg).addClass("active");
$("#inner ul>li").eq(prevImg).removeClass("active");
loadComplete = false;
image.addClass("topImg").css({"z-index":1});
imgSRC = imageSRCLink.eq(currImg).attr("href");
imageHolder.append("<img class='bottomImg' src="+imgSRC+" alt=''>");
$(".bottomImg").css({display:"none", "z-index":0}).bind("load", loadImageHandler);
$("#imgSpinner").css({display:"block"}).stop().animate({opacity:1}, 500, "easeOutCubic");
imgName = imageSRCLink.eq(currImg).attr("href").split('/')[2];
TextReadabilityHandler(imgName.substring(0, 5));
discription.eq(currImg).css({left:$(document).width()*dragDirection, display:"block"}).animate({left:0}, 1000, "easeInOutCubic");
discription.eq(prevImg).animate({left:$(document).width()*dragDirection*-1}, 1000, "easeInOutCubic", function(){
discription.eq(prevImg).css({display:"none"})
});
}
About 3/4 the above function you see TextReadabilityHandler which is where the switch takes place:
function TextReadabilityHandler(_imgNameSwitch)
{
if(_imgNameSwitch == 'Light')
{
$("#pagetitle").attr('class', 'sitetitle lighttextbackground');
$("#pagemenu").attr('class', 'sf-menu lighttextbackground');
$("#pageslogan").attr('class', 'slogan lighttextbackground');
}
else if (_imgNameSwitch == 'Dark_')
{
$("#pagetitle").attr('class', 'sitetitle darktextbackground');
$("#pagemenu").attr('class', 'sf-menu darktextbackground');
$("#pageslogan").attr('class', 'slogan darktextbackground');
}
else
{ alert(_imgNameSwitch); }
}
So I was thinking to do a crossfade while the image switches. Where I am stumped is how to implement. As I have it written the html element is updated with a new class and that change is applied instantly. How / where would I implement a .fadeOut() / .fadeIn()??
Thank You
As a side note I tried submitting my site to csscreator.com for critical review / suggestions on the design with no feedback. Any suggestion where I can get the design critiqued would be helpful.
Edit
Thank you user3037493 and Zeaklous.
You both broke through the road block I was up against. Here is what your answers triggered in my brain.
I added a custom namespace (for readability)
/* Text Readability switching */
var txtread =
{
onReady: function(_imgname)
{
txtread.fadeoutText(_imgname);
txtread.fadeinText();
},
fadeoutText: function(_imgname)
{
$("#pagetitle").fadeOut(1250);
$("#pagemenu").fadeOut(1250);
$("#pageslogan").fadeOut(1250);
$("#sitecopy").fadeOut(1550, txtread.TextReadabilityHandler(_imgname));
},
fadeinText: function()
{
$("#pagetitle").fadeIn(1250);
$("#pagemenu").fadeIn(1250);
$("#pageslogan").fadeIn(1250);
$("#sitecopy").fadeIn(1250);
},
TextReadabilityHandler: function(_imgNameSwitch)
{
if(_imgNameSwitch == 'Light')
{
$("#pagetitle").attr('class', 'sitetitle lighttextbackground');
$("#pagemenu").attr('class', 'sf-menu lighttextbackground');
$("#pageslogan").attr('class', 'slogan lighttextbackground');
}
else if (_imgNameSwitch == 'Dark_')
{
$("#pagetitle").attr('class', 'sitetitle darktextbackground');
$("#pagemenu").attr('class', 'sf-menu darktextbackground');
$("#pageslogan").attr('class', 'slogan darktextbackground');
}
else
{ alert(_imgNameSwitch); }
}
}
and then I modified the these two lines in ChangeImageHandler.
imgName = imageSRCLink.eq(currImg).attr("href").split('/')[2];
TextReadabilityHandler(imgName.substring(0, 5));
to
imgName = imageSRCLink.eq(currImg).attr("href").split('/')[2];
txtread.onReady(imgName.substring(0, 5));
So the whole thing looks like this:
function changeImageHandler(){
var imgSRC;
$("#inner ul>li").eq(currImg).addClass("active");
$("#inner ul>li").eq(prevImg).removeClass("active");
loadComplete = false;
image.addClass("topImg").css({"z-index":1});
imgSRC = imageSRCLink.eq(currImg).attr("href");
imageHolder.append("<img class='bottomImg' src="+imgSRC+" alt=''>");
$(".bottomImg").css({display:"none", "z-index":0}).bind("load", loadImageHandler);
$("#imgSpinner").css({display:"block"}).stop().animate({opacity:1}, 500, "easeOutCubic");
imgName = imageSRCLink.eq(currImg).attr("href").split('/')[2];
txtread.onReady(imgName.substring(0, 5));
discription.eq(currImg).css({left:$(document).width()*dragDirection, display:"block"}).animate({left:0}, 1000, "easeInOutCubic");
discription.eq(prevImg).animate({left:$(document).width()*dragDirection*-1}, 1000, "easeInOutCubic", function(){
discription.eq(prevImg).css({display:"none"})
});
}
and now I have my fade in / out effect and while the text blocks are faded out I do a quickie class change by making the copyright fadeout take a bit longer (ensuring vast majority of content is gone) then executing the return function to switch classes as seen in my custom namespace here:
$("#sitecopy").fadeOut(1550, txtread.TextReadabilityHandler(_imgname));
Of course nothing works perfectly and for some reason I haven't figured out yet one element is not fading in / out?? That is off topic here so I posted a new SO question here for that one.
Element refusing to fade out or in

sorry, i dont have enough reputation to comment on your question, and this answer is really just a comment.... white text with black background is going to be easier to read. here is a JSfiddle http://jsfiddle.net/Kyle_Sevenoaks/ZnfED/1/
basically, the css for your .slogan p you would make the color to be white and add this text shadow
{text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;}
edited to add: to have the textbackground change before the image, call TEXTREADABILITYHANDLER at the beginning of the changeImageHandler function and maybe try putting a delay on the imgSpinner.animate per http://api.jquery.com/delay/

You could try doing it yourself as this SO answer and corresponding example describe, but depending on the image it is liable to be incorrect more so than if you went with an actual plugin
Background Check is what I would likely recommend. It's not exactly what you are requesting, but it changes the background of elements as well as the text on top of it. One added, you can use it simply by declaring
BackgroundCheck.init({
targets: '.ui', // Select the divs to have the background changed
images: '.thumbnail' // Select the list of images to be analyzed
});

ExtJS 4.2.1 - add a top arrow to any popup menu

I would to create a menu with the following appearance:
I have managed to create the background color using css and the rounded corners as well.
I am now attempting to add the top arrow.
How can I add an element to the menu itself (the arrow), and shift its original open position?

You can modify the renderTpl of the menu to include the triangle at the top. I would recommend creating a class which extends Ext.menu.Menu. See this example.
Ext.define('Ext.menu.TriangleMenu', {
extend: 'Ext.menu.Menu',
initComponent: function () {
//get the original template
var originalTpl = Ext.XTemplate.getTpl(this, 'renderTpl');
//add the triangle div (or img, span, etc.)
this.renderTpl = new Ext.XTemplate([
'<div class="menu-triangle"></div>',
originalTpl.html, //the html from the original tpl
originalTpl.initialConfig //the config options from the original tpl
]);
this.callParent();
},
beforeSetPosition: function () {
//shift the menu down from its original position
var pos = this.callParent(arguments);
if (pos) {
pos.y += 5; //the offset (should be the height of your triangle)
}
return pos;
}
});
How you render the triangle is entirely up to you. You can do it without having to use an image by using this neat little border trick.
.menu-triangle {
height: 0;
width: 0;
border-bottom: 5px solid black;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}

change text shadow style on canvas

i am using fabric to change the text shadow for text object on canvas ,
textShadow: 'rgba(0,0,0,0.3) 5px 5px 5px'
this works in above code ,, but when i try to set it to another color-shadow on click of another button it is not working .
$("#txt_strength").change(function () {
console.log('strength called');
var obj = canvas.getActiveObject();
if (!obj) return;
obj.set('textShadow ', 'green 1px 15px 4px');
canvas.renderAll();
});
Please suggest ,

You have a whitespace after 'textShadow '. Change it to obj.set('textShadow', 'green 1px 15px 4px'); and it should work.
http://jsfiddle.net/Kienz/gvn3X/

You can use now:
obj.set({shadow: 'rgba(0,0,0, 0.3) 2px 2px 2px'});
full codes:
$("#txt_strength").change(function () {
console.log('strength called');
var obj = canvas.getActiveObject();
if (!obj) return;
obj.set({shadow: 'rgba(0,0,0, 0.3) 2px 2px 2px'});
canvas.renderAll();
});