I try to do as what tailwindcss not using my custom class inside breakpoints said, but it's still didn't work for me.
Here is my code:
<template>
<div class="img-box-md overflow-hidden rounded-sm lg:img-box-lg">
...
</div>
<template>
......
<style lang="postcss" scoped>
#responsive {
.img-box-lg {
height: 9.2vw;
}
}
</style>
I tried to use #responsive to make the class to be responsive, but failed to find it works in console in large width
I know where the problem is: I use windicss as my alternative to Tailwind, but there is some strange differences between their grammar. For example, the correct grammar of the windicss is
#variants lg {
.lg\:img-box-lg {
height: 9.2vw;
}
}
Code you provided is correct.
Demo: https://play.tailwindcss.com/HIvIPglMqf
Comment under question about using #variants responsive instead of #responsive can be misleading - they are the same (second one is just shorter alias).
Docs: https://tailwindcss.com/docs/functions-and-directives#responsive
Restart compilator and check again. My guess is that you are using new JIT mode where problems in recompiling config is common issue.
Related
In Tailwind Officail docs, there are lots of width utilities we can use.
However, the maximum fixed width I can specify is w-96, which is width: 24rem; (384px)
I've noticed a weird class called w-px, at first glance, I thought I can do w-600px, but it's not working, it is exactly 1px.
I am currently migrating my old project to Tailwind CSS, so there are going to have lots of weird widths I need to specify, but Tailwind CSS doesn't provide them by default.
If I can just do w-600px would be nice, or am I missing any other better approach?
If you configure your Tailwind install to run in just-in-time mode, and you are running tailwind 2.1+, you can use their arbitrary value support. https://tailwindcss.com/docs/just-in-time-mode
For example, I needed a width of 600px, here is how I specified it:
h-[600px]
Can you please check the below code? Hope it will work for you.
#1 You need to add the below code in tailwind.config.js
module.exports = {
theme: {
extend: {
width: {
'600': '600px',
}
}
}
}
#2 After that you can use w-600 in your HTML file like below.
<div class="w-600">...</div>
You were just missing the brackets [ ]. Try this:
w-[600px]
Take a look on the section "Arbitrary values" that most part of Tailwind classes have. There you can see how you can set any value you want.
Arbitrary values for with https://tailwindcss.com/docs/width#arbitrary-values
If you need to use a one-off width value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.
<div class="w-[600px]">
<!-- ... -->
</div>
I need to hash (or just prefix_) all CSS class names in a Vue CLI project to avoid class inheritance when I embed the app inside an existing HTML page.
Basically the Vue app/widget I've made uses some CSS class names like .title, .container, .date, .location etc, and the problem I've got is that the global CSS on the website where I'm embedding this Vue app already uses the class names .title, .container etc, so it's applying those styles to my Vue app as well. I just want a simple way — maybe using vue.config.js — to instruct webpack to randomly hash or prefix the CSS class names so that they are completely unique and won't inherit any parent styling. Thanks
Thanks to the comments above I managed to get it to work. The implementation is not as straight forward as I'd have liked because it requires changing a lot of my existing code — I was hoping for a quicker, simpler solution that would just take my existing code and hash the preexisting CSS classes — which I'm pretty sure must be possible as it seems like such a trivial task? Anyway, here's my setup for now:
vue.config.js
module.exports = {
css: {
requireModuleExtension: false,
loaderOptions: {
css: {
modules: {
localIdentName: '[hash:6]'
}
}
}
}
}
my-component.vue
<template>
<div :class="$style.myClass"> ... </div>
</template>
<style module>
.myClass {
color: red;
}
</style>
Using the above setup I get a div which, instead of being:
<div class="myClass"> ... </div>
is now rendered as:
<div class="_2d736c"> ... </div>
Note the module attribute on the <style> tag which is important. Also note the class name binding: :class (or v-bind:class) not just class.
Hope that helps someone. Thanks
I'm not an CSS Expert but until now I've not seen any "problem" like this.
So, I am using Vuetify and I added a for my search form..
Now that component is creating:
<div input-group input-group--prepend-icon input-group--text-field primary--text>
<label for="search"></label>
<div class="input-group__input"></div>
<div class="input-group__details"></div>
<div class="input-group__messages"></div>
</div>
Now my problem is that class .input-group__messages has a min-height and I want it to have 1px or not show at this case, but I can't manage to edit that from my component... there is the way to go to root style but I don't want to do that I want to learn or to know what's the problem what am I missing.
Looking forward for a reply from someone
You need vue-loader version 12.2+ and use Deep selectors
Using CSS (also works with stylus but your IDE might throw syntax errors):
>>> .input-group__messages {
min-height: 1px;
}
Or SCSS:
/deep/ .input-group__messages {
min-height: 1px;
}
See this answer for explanations, and other possible solutions if the above did not work.
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 am trying to add custom styling to my web app. Here is the link to my code:
https://github.com/SammyAbukmeil/rps-challenge
In layout.erb I have the following:
<head>
...
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
...
</head>
Which should be loading my custom.css file.
In views/index.erb I have an ID of test:
<img class="img-responsive center-block" style="margin-top: 40px" id="test"src="http://i.imgur.com/hSuFTzO.png">
and in css/custom.css I am calling that ID:
#test {
margin-top: 50px;
}
But for some reason it doesn't apply my custom styling, although bootstrap (which is being linked in layout.erb and is adding styling to the .erb files throughout the project) is working.
I've tried looking through similar questions on stack overflow without success, also tried google for how to add custom styling to a bootstrap project - everything I'm doing seems to be correct.
Any advice is greatly appreciated. Thanks!
EDIT: So i checked the console and found this:
...
Status Code: 404 Not Found
Request URL: http://localhost:4567/css/custom.css
...
So I guess I'm not linking it right.
Bootstrap selectors are very specific, for example body > div > img.img-responsive. You need to be more specific in order to override the selector. You can test this by using temporally the !important declaration:
#test {
margin-top: 50px !important;
}
If it overrides, you have a working setup that just needs more specific selectors. After that you should remove the !important declaration and add details to the selector:
body > div > img#test {
margin-top: 50px !important;
}
In Sinatra any static files (such as CSS files) should be in the folder pointed to by the public_folder setting. Usually this is named public. In your server.rb you set it to be public but relative to the projects root.
You need to create a public folder at the top level of your project (next to app, view etc.), move your css directory to it and then change the setting in server.rb so that :public_folder points to it, similar to what you have done with the :views setting:
set :public_folder, proc { File.join(root, "..", "public") }
First You need to understand the hierarchy of CSS
You Can use Firebug (Firefox) to identify that your styling is apply or not also what class is overrating your custom css.
Note: Also avoid adding ID for CSS Styling
You need to override the bootstrap selector.
It is not good practice to use this in your finished website, however you can use !important to over ride other style rules.
Example of Use
.element-class{
width:50%;
}
.element-class{
width:100% !important;
}
The element would have the width of 100% here.
Read more about when to use this on the css-tricks article