chore: add Tailwind #44
Conversation
|
I don't think I want to add another css lib since we use bootstrap currently and it has utility classes just like this. |
| @@ -29,7 +24,7 @@ export function Header({selectedTheme, onClick}: HeaderProps) { | |||
|
|
|||
| return ( | |||
| <div className="d-flex justify-content-center"> | |||
| <img style={logoStyle} src={logo} onClick={onClick} alt="logo" /> | |||
| <img className="cursor-pointer h-[250px]" src={logo} onClick={onClick} alt="logo" /> | |||
There was a problem hiding this comment.
Could do the cursor with existing bootsrap. https://getbootstrap.com/docs/4.5/content/reboot/#pointers-on-buttons
Not sure about pixel height though
There was a problem hiding this comment.
As far as I can tell you can only do percentages with bootstrap. Can't specify pixels
https://getbootstrap.com/docs/5.0/utilities/sizing/#utilities-api
| @@ -7,12 +7,11 @@ interface InputProps { | |||
|
|
|||
| function Input({label, placeholder, value, onInput}: InputProps) { | |||
| return ( | |||
| <div style={{width: '100%'}}> | |||
| <div className="w-[100%]"> | |||
There was a problem hiding this comment.
| <label className="form-label">{label}</label> | ||
| <div style={{borderRadius: '20px'}} className="shadow-sm"> | ||
| <div className="shadow-sm rounded-full"> |
There was a problem hiding this comment.
| @@ -204,7 +195,7 @@ function Goals() { | |||
| <br></br> | |||
|
|
|||
| <div className="d-flex"> | |||
| <div className="flex-grow-1" style={{flexBasis: '0'}}> | |||
| <div className="flex-grow-1 basis-0"> | |||
There was a problem hiding this comment.
Does not look like bootstrap has a thing for this
|
Yeah I don't know @astone123. It seems there are a few things that tailwind can do that bootstrap cannot. Still not sure if we want to mix these together. |
|
@wweitzel okay I guess we should stick to bootstrap |
|
yeah i guess. im not married to bootstrap at all. just don't want two css libs mixing in a tiny project like this |
This PR adds Tailwind CSS so that we can use the utility classes that it provides. It also refactors the use of all
styleprops to use Tailwind classes instead.