NativeWind basically coming from tailwindcss, I was wondering if there is a way to reuse styles just like in tailwindcss where you can have define a class name that will hold a set of styles and therefore you could just apply that class name to a tag directly
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer components {
.select2-dropdown {
#apply rounded-b-lg shadow-md;
}
.select2-search {
#apply border border-gray-300 rounded;
}
.select2-results__group {
#apply text-lg font-bold text-gray-900;
}
/* ... */
}
Related
I am trying to create a custom VueJS components using TailwindCSS and NuxtJS. At times, I want to use the tailwind css #apply directive to style my component. Something like this:
<template>
<div class="card">
...
</div>
</template>
<style>
.card {
#apply bg-grey-200 text-grey-800;
}
</style>
I then want the capability of overriding those styles when I use the component. Something like this:
<Card class="bg-blue-200">...</Card>
Now, this is technically possible -- it just requires organizing the tailing base css file in the right way. Namely, like this:
#tailwind base;
#tailwind components;
.card {
#apply bg-grey-200 text-grey-800;
}
#tailwind utilities;
That is to say, #tailwind utilities needs to come after the custom class names. The problem is that with nuxt it seems to be the opposite -- namely, the custom class names (and their css styles) come after the tailwind utilities.
How can I change this in NuxtJS?
For what it is worth, I am using the #nuxtjs/tailwindcss module with default installation:
buildModules: [
// Doc: https://github.com/nuxt-community/nuxt-tailwindcss
'#nuxtjs/tailwindcss',
],
I want to change the background color of <v-progress> by using variable
$progress-circular-underlay-stroke but the new value does not affect the output
<template>
<v-progress-circular
:rotate="360"
:size="100"
:width="15"
value="20"
color="primary"
>
20
</v-progress-circular>
</template>
<style lang='scss'>
#import '~vuetify/src/styles/styles.sass';
#import '~vuetify/src/components/VProgressCircular/_variables.scss';
$progress-circular-underlay-stroke = "#FF6859"
</style>
my environment is Vuecli.
You can overwrite its style as given below:
.v-progress-circular__underlay {
stroke: #ff6859 !important;
}
If SASS variable change doesn't work for you like $progress-circular-underlay-stroke = "red"
Then you can do it via directive and it's more efficient if you're using two different color base progress circles. This will style only one instance and not override your plugin style all over the app
---- Todo.vue ----
<v-progress-circular
:rotate="90"
:size="186"
:width="4"
:value="'25%'"
:color="red"
:underlayColor="pink"
v-drv-progress-circle
>
--- ProgressCircle.directive.vue
export const drvProgressCircle = {
bind: function(el, binding, vnode) {
const unFillCircle = el.querySelector('.v-progress-circular__underlay')
const { underlayColor } = vnode.data.attrs
if (underlayColor) {
unFillCircle.style.stroke = underlayColor
}
}
}
I want to apply custom CSS and override some default Vuetify colors. For example, success button can be easily overridden:
.success-button {
background-color: $sb--color-success !important;
}
But is there a way to do the same without using !important? I tried both:
body .success-button {
background-color: $sb--color-success;
}
button .success-button {
background-color: $sb--color-success;
}
How to do it without !important?
You can try something along this lines
// src/index.js
// Libraries
import Vue from 'vue'
import Vuetify from 'vuetify'
// Helpers
import colors from 'vuetify/es5/util/colors'
Vue.use(Vuetify, {
theme: {
primary: colors.red.darken1, // #E53935
secondary: colors.red.lighten4, // #FFCDD2
accent: colors.indigo.base // #3F51B5
}
})
Or something like this
<h1 class="subheading grey--text">DASHBOARD</h1>
In my Vue.js component when I set the style to "scoped", the styles are ignored:
<style lang="sass" scoped>
I get the following error in the console:
[HMR] unexpected require(609) to disposed module
It's working as expected if I don't add the "scoped" attribute.
Converting my comment to an answer.
When you work with scoped style(s) Vue adds data attribute with an unique value to all tags in your component and then silently modifies your CSS/SASS selectors to rely on this data attribute.
For example, .list-container:hover becomes .list-container[data-v-21e5b78]:hover
If you need a deep selector - that is, which affects child components - you can use a combinator
<style scoped>
.a >>> .b { /* ... */ }
</style>
which will be compiled into
.a[data-v-f3f3eg9] .b { /* ... */ }
If SASS is unable to parse the >>> combinator you can replace it with /deep/ instead.
If you do not use the combinator then
<style scoped>
.a > .b { /* ... */ }
</style>
would be compiled into
.a > .b[data-v-f3f3eg9] { /* ... */ }
You can use the ::v-deep combinator to target scoped styles of a child component.
Example:
<template>
<main class="content">
<child-component></child-component>
</main>
</template>
In this case, if you wanted to change the color of paragraphs <p> in the child component, you could do what with:
.content ::v-deep p {
color: red;
}
I`m using Aurelia develop my project, When navigating, i want to add some transition between routes(e.g. fadeIn, fadeOut),but i don't know how to do it ? Thanks.
How to using aurelia-animator-velocity to implement the effects?
Using aurelia-animator-css.
You must put the style class="au-animate" on the topmost div in your route file. This must be the main div of the html template.
Sample router HTML
<template>
<div class="au-animate">
<div class="router-body">
<div class="router-list">
</div>
</div>
</div>
</template>
Sample animate CSS
#keyframes fadeOutRight {
100% {
opacity: 0;
transform: translate(100%, 0);
}
0% {
opacity: 1;
transform: none;
}
}
#keyframes fadeInRight {
100% {
transform: none;
}
0% {
transform: translate(-100%, 0);
}
}
.au-enter {
transform: translate(100%, 0);
}
.au-enter-active {
animation: fadeInRight 0.3s;
}
.au-leave-active {
animation: fadeOutRight 0.3s;
}
Aurelia Velocity
To add animations to specific elements:
<section anim-enter="fadeIn" anim-leave="fadeOut"></section>
<section anim-enter="{opacity:0};{duration:1000,easing:ease-out}"></section>
Use With JS
To use enter/leave animations on any element the animator has to be invoked manually.
To do this inject it into your VM an call the enter/leave methods.
import {VelocityAnimator} from "gooy/aurelia-animator-velocity";
export class MyCustomElement{
static inject = [Element,VelocityAnimator];
constructor(element,animator) {
this.element = element;
this.animator = animator;
}
attached(){
//run enter animation on the element
this.animator.enter(this.element);
//run leave animation on the element
this.animator.leave(this.element);
//run an effect on the element
this.animator.animate(this.element,"callout.bounce");
}
}
the answer will be aurelia-animator-css
here is a basic tutorial.