CSS Refactoring step 1

[shashkovdanil]

Is your feature request related to a problem?

1. Remove inline styles and !important
2. Use CSS vars instead of mix CSS vars and SCSS vars

Discussion is here #8066

Describe the solution you would like

Find all the places where inline styles and !important are used and rewrite them.

Right now scss variables are used mostly for themes, I want to use a bunch of https://color-mode.nuxtjs.org/ + :root selector

сс @preschian @roiLeo

Describe alternatives you have considered

Screenshots

No response

Are there opened related issues?

No response

[yangwao]

This is brave task

[shashkovdanil]

@preschian @roiLeo I want use this variables across project instead of include ktheme. What do you think?

[preschian]

I want use this variables across project instead of include ktheme. What do you think?

We can achieve that while on the go. I think migrating most of the part from global.scss to tailwindcss utilities is better. It can help us to reduce the CSS size

I expect to reduce no of lines from global.scss

[shashkovdanil]

@preschian do you wanna use tailwindcss not only in UI? If so, I can do it in this task, also get rid of most of the styles in global.scss

[preschian]

do you wanna use tailwindcss not only in UI?

For me, yes. It would be better if we could also use that in our Kodadot app. Are there other reasons we can't use Tailwind in our app? cc @kodadot/internal-dev

If so, I can do it in this task, also get rid of most of the styles in global.scss

next, chunk CSS entry

[shashkovdanil]

Ye, tailwindcss is good in terms of performance https://tailwindcss.com/docs/optimizing-for-production

[roiLeo]

I want use this variables across project instead of include ktheme. What do you think?

let's got! Goal is to replace Bulma in libs/ui and kodadot repo.

I'm just wondering what's the difference with nuxt-tailwind & official tailwind package? only viewer?

[shashkovdanil]

The biggest difference is the presence of viewer, the rest is minor things like writing config not in a separate file, but in nuxt.module.ts, and pre-installed nesting. I'd leave the configuration explicit, to be honest

[shashkovdanil]

Okay guys, scope for this task

1. Use variables instead of include ktheme
2. Setup tailwindcss for kodadot and remove .is-* classes from global.scss
3. Remove Bulma

@roiLeo @preschian that sounds good?

[roiLeo]

Sounds good! I would migrate our UI components first, then migrate all in-app helpers to tailwind.

[preschian]

Okay guys, scope for this task

1. Use variables instead of include ktheme
2. Setup tailwindcss for kodadot and remove .is-* classes from global.scss

looks good 👍

3. Remove Bulma

this one is not in the same PR right? this one will be huge

[shashkovdanil]

Task for components

• Migration UI kit to tailwindcss #8222

[vikiival]

Are there other reasons we can't use Tailwind in our app? cc @kodadot/internal-dev

Isnt it better to use unocss + some custom thingies?
Just asking for a friend

[shashkovdanil]

Nah, tailwindcss is a very well developed tool that has a large community, financial support, lots of handy stuff like code editor extensions. Also good documentation

[shashkovdanil]

@roiLeo assign this task on me please

[shashkovdanil]

Related issue #8556

[roiLeo]

Note that we need to refactor css by:

• use tailwind helpers class when we can
• use tailwind responsive helpers for breakpoint
• use @apply when we can't use class nor responsive
• use css when none of that are available

[exezbcz]

this one is open

• Refactor inline styles #9528