How to remove the 1st line on the 1st tab.?
Opened this issue · 7 comments
Is their other way to customize the line? I want it to remove the 1st line before the tab.
I try override it using css class. but it well show like this.
.vue-form-wizard .wizard-navigation .wizard-progress-with-circle { @apply bg-gray-100 relative overflow-hidden; &::before, &::after { content: ""; width: 60px; @apply h-full absolute block bg-white top-0; } &::before { @apply left-0; } &::after { @apply right-0; } }
I create custom class with pseudo class in css.
Note: I using SCSS and tailwindcss for prevent alot of line code
.vue-form-wizard .wizard-navigation .wizard-progress-with-circle { @apply bg-gray-100 relative overflow-hidden; &::before, &::after { content: ""; width: 60px; @apply h-full absolute block bg-white top-0; } &::before { @apply left-0; } &::after { @apply right-0; } }I create custom class with pseudo class in css.
Note: I using SCSS and tailwindcss for prevent alot of line code
Did I Something wrong?
css code your given is error in my side,.. note: im not using tailwind... my css library i used is bootstrap and uikit. Can it work using bootstrap?
The @apply directives are tailwind-only. If you don't use tailwind you'll have to go to the tailwindcss website and look up the different classes being used above and add the corresponding css
But... you should just start using Tailwind already!! You'll thank us VERY shortly after.. just do it.. you're missing out
You can absolutely mix Tailwind and Bootstrap too.. I've been doing it for years. You can also apply a prefix to tailwind classes so they don't collide with Bootstrap classes, such as tw-
Well worth the learning curve.. it will blow your mind and you'll wonder why you didn't adopt Tailwind sooner. It's the best thing since sliced bread ;)
@nasirDoe would you mind pasting your entire vue-form-wizard class here that you've tailwind-ized ?
Many thanks and thanks for the snippet above too, very useful!
@vesper8 Thanks for the info,. I thought Tailwind and Bootstrap will conflict if they use in one project,. Honestly, still not use tailwind. But I have plan it to use it in the future project,. Because it has more classes than bootstrap. It also has dynamic css classes, Am I right? I like and love bootstrap and I used it since bootstrap 3. But I think you are right, need to step up and used tailwind already.
@AbingPj Yep Tailwind is so awesome and just keeps getting better.. Dynamic classes.. you're talking about the new'ish Tailwind JIT.. it's mindblowing.
Honestly if you want to start using it, just watch these amazing videos from their official channel here https://www.youtube.com/c/TailwindLabs/videos
If that doesn't make you rush to start using it then.. ;)
Resolve with sass. thanks
.wizard-navigation .wizard-progress-with-circle::before { content: ""; width: 65px; height: 100%; position: absolute; display: block; background-color: $darktheme-background; top: 0; } .wizard-navigation .wizard-progress-with-circle::after { content: ""; width: 65px; height: 100%; position: absolute; display: block; background-color: $darktheme-background; top: 0; right: 0; }