I try to use some tailwind classes, but there's classes that not working properly.
<h2 class="text-6xl">Test</h2> Is working
<h2 class="text-4xl">Test</h2> Isn't working
<h2 class="text-orange-500">Test</h2> Is working
<h2 class="mt-4">Test</h2> Isn't working
Ah, i have to --watch my tailwind before.
Related
All the classes in my project (react + vite) work except the media queries, and I am having a hard time figuring out why. I tried manually adding all the breakpoints (with the default values) in the tailwind config file which had no effect at all.
function Sidebar(props) {
return(
<>
<aside className="text-xl p-4">
<h1 className="font-chivoMono ">Noteit</h1>
<h3 className="text-xl md:text-7xl text-white sm:text-red-500 md:text-green-300 lg:text-pink-300">{props.displayName}</h3>
</aside>
</>
)
}
export default Sidebar
I took all the configuration steps correctly (and I think no classes would have worked if i didn't)
I tried to run the command
npx tailwindcss -i ./src/styles.css -o ./dist/output.css
thinking it might do something but honestly I am just completely clueless to why this is not working
Also, the media queries do not show up while inspecting the page.
I recently started learning web development and I was playing around with a RoR app, to which I added the bootstrap gem using the command:
bundle add bootstrap
It went fine, I changed the /app/assets/stylesheets/application.css extension to .scss, I then added
#import "bootstrap";
#import "bootstrap-sprockets";
to said file, and restarted the server. Now I could clearly see that the font changed, and started playing around with different properties. I created some colourful buttons, a callout and then I wanted to put a jumbotron at the top of the page.
I realised however, that it had no background colour, even though it should be gray. Everything else seems to work, but I can not get it to have a background for some reason, and there seems to be noone having the same problem which is not a good sign.
This is how it looks
(https://i.stack.imgur.com/R630H.png)
<div class="container">
<div class="jumbotron text-center">
<h1>
This is my header
</h1>
<p>
Hello this should maybe someday be a jumbotron
</p>
</div>
<div class="callout callout-primary">
<h4>Primary Callout</h4>
This is a primary callout.
</div>
<%= link_to "About me", 'about_me', role: "button", class: "btn btn-info"%>
<button class="btn btn-success">Green button</button>
</div>
Bootstrap version: 5.2.2, Ruby version 3.1.2, RoR 7.0.4
I have no clue what is going wrong since the other elements seem to work. Any help is much appreciated. Link to my full repository
I tried using a full html5 template and adding
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
To the files , which did make it work, but the whole point of installing the gem is so I dont have to do that right?
I'm afraid Bootstrap v5.2 does not have a jumbotron anymore as v4 did.
Try this instead: https://getbootstrap.com/docs/5.2/examples/jumbotron/
Also you can check out the available components for v5.2 here: https://getbootstrap.com/docs/5.2/components/accordion/
Happy hacking!
I have an app built using React with Parcel. I am attempting code splitting via modules, but have a strange issue.
On my home page, I am importing a module that has its own css. When the component is showing on the page, there is one single css rule that is showing as 'undefined' in the inspector.
When I run this in my local, or on another page in my app such as About, the rule is recognized and everything works perfectly.
I've tried everything I can think of, but I am lost as to what to try next.
Here's the code in my js file:
<div className={styles.content__move + " content__move"}>
<div className={styles.columns + " columns"}>
<div className={styles.column + " column"}>
The rule being ignored is 'styles.columns'. As you can see it is in between styles.content__move and styles.column, and BOTH of those are working as expected.
When inspecting I see this:
<div class="_content__move_31d79 content__move">
<div class="undefined columns">
<div class="_column_31d79 column">
<div class="_column__img_31d79 column__img _bg4_31d79">
But if I add the module on another page, it shows correctly as:
<div class="_content__move_31d79 content__move">
<div class="_columns_31d79 columns">
<div class="_column_31d79 column">
<div class="_column__img_31d79 column__img _bg4_31d79">
What might I be missing?
I'm not sure what the problem was, but I renamed the class in the JS and CSS, rebuilt, and it started working right away. I would suggest to try this before changing style loaders for anybody that has the same problem.
I added:
class="styles.columns_f"
in the JS, and in the SCSS:
.columns_f {...}
Ran a production build, and that was the fix.
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