Transfering docs to Tailwind

aluarius commented 1 year ago

Related: #2816

Description

[x] tailwind was added to the docs;
[x] all margin-padding helpers (mr-1, pt-6 etc) were fixed depending on Tailwind values scale;
[x] old margin-padding helpers were commented because of names conflicts;
[x] tailwind was added to the vue book via cdn stylesheet;
[x] codesandbox config updated;
[x] conflicts for flex helper resolved.

No need to check hundreds of changed files in docs/src, because there're lots of similar changes (mt-4 -> mt-6 etc).

New values are not identical to old ones, because tailwind uses 4-divisible scale, unlike ours. So, some padding-margins were changed from 12.8px to 12px for example. I've not mentioned any meaningfull artefacts on the site because of this, but better take a look twice.

Types of changes

[ ] Bug fix (non-breaking change which fixes an issue)
[x] New feature (non-breaking change which adds functionality)
[ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
[x] Improvement/refactoring (non-breaking change that doesn't add any feature but make things better)

aluarius commented 1 year ago

Why gird is commented, but not removed?

Just to be able to return them any moment. We call totally remove them in 1/6/0, i guess. Will add a comment.

aluarius commented 1 year ago

Also, it sucks now that demo can not be simply copy/pasted :(

Don't worry, this helpers were used (for about 90 percents ) in purpose of spacings between different demos :)

rustem-nasyrov commented 1 year ago

Margin class didn't apply here.

rustem-nasyrov commented 1 year ago

Missing button color in the landing page.

rustem-nasyrov commented 1 year ago

Bigger indents then on the vuestic.dev

rustem-nasyrov commented 1 year ago

@xx13 is it ok to you if the code fonts will be like this?

In the PR:

Prod:

rustem-nasyrov commented 1 year ago

https://vuestic.dev/en/ui-elements/date-input#mode

https://vuestic.dev/en/ui-elements/date-picker#mode

rustem-nasyrov commented 1 year ago

Switch. Same on prod.

rustem-nasyrov commented 1 year ago

Scroll container

Horizontal scroll doesn't work.

rustem-nasyrov commented 1 year ago

Split

Affix

Translation and bottom affix doesn't work.

Progress bar

All demos are broken.

xx13 commented 1 year ago

prod version with smaller font size looks better

@xx13 is it ok to you if the code fonts will be like this?

In the PR: Prod:

aluarius commented 1 year ago

Thanks, @rustem-nasyrov !

All problems listed above (including font issue) were caused by conflicts of reset files (i've disabled Tailwind's one) and flex helper (it's really display: flex for Tailwind, but display: block for Vuestic helpers %).

rustem-nasyrov commented 1 year ago

Switch

Split

If it's not difficult for you, could you fix it as well?

date-input#view

Different paddings.

Icons config

aluarius commented 1 year ago

This (https://user-images.githubusercontent.com/29167241/211571987-9867982e-19bb-40cf-84bb-d46ac337bd7f.png) isn't related to this pr. I know the way to fix it, but awaiting response from Maxim.

rustem-nasyrov commented 1 year ago

This (https://user-images.githubusercontent.com/29167241/211571987-9867982e-19bb-40cf-84bb-d46ac337bd7f.png) isn't related to this pr. I know the way to fix it, but awaiting response from Maxim.

You need to apply align-items: flex-start styles and it will be fixed.

aluarius commented 1 year ago

You need to apply align-items: flex-start styles and it will be fixed

Yea, but it doesn't solve initial bug with the component.

aluarius commented 1 year ago

Switch problem moved to https://github.com/epicmaxco/vuestic-ui/issues/2864

epicmaxco / vuestic-ui

Transfering docs to Tailwind #2838

Description

Types of changes