feat: migrate to tailwind and shadcn #83
Conversation
src/lib/utils.ts
Outdated
| @@ -0,0 +1,6 @@ | |||
| import { clsx, type ClassValue } from "clsx"; | |||
There was a problem hiding this comment.
This was added by shadcn but it's already defined in utils.ts
There was a problem hiding this comment.
Good catch!! Thanks
| } | ||
|
|
||
| @theme inline { | ||
| --radius-sm: calc(var(--radius) - 4px); |
There was a problem hiding this comment.
Is it worth adding custom value examples here just to ilustrate how Tailwind applies the custom color to its classes? (Like, text-, border-, etc).
Or maybe link to the documentation? Or perhaps in a different PR?
There was a problem hiding this comment.
I'd prefer to do this on a separate PR. And I also think we should discuss what we want this to look like
There was a problem hiding this comment.
Awesome job!
Is it wort also adding Tailwind Prettier extension?
https://tailwindcss.com/blog/automatic-class-sorting-with-prettier
Done! |
mlvieras
force-pushed
the
feat-add-tailwind
branch
from
0a8dbd0 to
0892e1a
Compare
src/common/container/container.tsx
Outdated
| @@ -10,7 +7,10 @@ export const Container: React.FC<ContainerProps> = ({ | |||
| className = "", | |||
| ...props | |||
| }) => ( | |||
| <div className={classnames(className, styles.baseContainer)} {...props}> | |||
| <div | |||
| className={`mx-auto w-full px-4 sm:w-[40rem] md:w-[48rem] lg:w-[64rem] xl:w-[80rem] 2xl:w-[96rem] ${className}`} | |||
There was a problem hiding this comment.
In here we should use the cn function, since tailwind doesn't respect class precedence by the order in the className
Description of the change
This PR introduces a bunch of changes. The main one is migrating from Sass to Tailwind + Shadcn. This also caused other changes in cascade (pun intended). Here is a summary:
Screenshot/Execution
Home screen
About screen
Login screen
Related PRs
None