small devx changes for css / tailwind tooling #1264
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
👷 Deploy request for system-init-corp pending review.A Netlify team Owner will need to approve the deploy before you can run your build. Are you a team Owner? Visit the deploys page to approve it → Need more help? Learn more in the Netlify docs →
|
theoephraim
force-pushed
the
theo/css-testing
branch
from
a96984e
to
24dea28
Compare
theoephraim
commented
Sep 6, 2022
| @@ -55,3 +55,19 @@ This template should help get you started developing with Vue 3 and Typescript i | |||
| - Enable format on save (recommended) | |||
| - add `"editor.formatOnSave": true` to `.vscode/settings.json` file | |||
| - add `"[vue][typescript][javascript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" }` to `.vscode/settings.json` file | |||
|
|
|||
| ### .vscode/settings.json | |||
There was a problem hiding this comment.
added full example of vscode settings file
theoephraim
commented
Sep 6, 2022
| class="appearance-none block px-3 py-2 border rounded-sm shadow-sm focus:outline-none sm:text-sm checked:bg-neutral-900 bg-neutral-600 indeterminate:bg-neutral-900" | ||
| :class="checkBoxClasses" | ||
| :class=" | ||
| clsx( |
There was a problem hiding this comment.
I just picked a random component with an long classes function to show an example of how clsx can help
theoephraim
commented
Sep 6, 2022
| <Icon name="minus" size="full" /> | ||
| </div> | ||
|
|
||
| <Menu> | ||
| <MenuButton | ||
| as="div" | ||
| class="bg-white border-neutral-300 border text-black dark:bg-black dark:text-white dark:border-black text-center w-20 cursor-pointer mx-2 flex flex-col justify-center" | ||
| :class=" | ||
| clsx( |
There was a problem hiding this comment.
still helpeful, even if just breaking up lines, plus lets us quickly add more later
theoephraim
force-pushed
the
theo/css-testing
branch
from
24dea28
to
7e7e245
Compare
|
bors merge |
|
Build succeeded: |
zacharyhamm
pushed a commit
that referenced
this pull request
Sep 7, 2022
1264: small devx changes for css / tailwind tooling r=theoephraim a=theoephraim did some digging into latest tooling and best practices for tailwind/css/etc. Hopefully these small quality of life improvements will help make things easier and keep things tidy. - main tool is https://github.com/lukeed/clsx - secondary is using a (noop) [string template tag function](https://www.freecodecamp.org/news/a-quick-introduction-to-tagged-template-literals-2a07fd54bc1d/) with IDE settings to get autocomplete on class lists outside of the template tag Some quick guidelines on tailwind classes: - try to keep tailwind classes in the template _as much as possible_ - feel free to use clsx even when seems unnecessary as it will make adding more classes easier later - break up super long lists of classes into multiple lines, grouping things as appropriate (ex: static classes, dark mode, toggles based on state, etc) - dont copy paste classes if used multiple times in component, move to script as static var or computed (if dynamic) and use `clsx` and `tw` helpers - its OK to also add semantic classes with BEM-ish naming if it might be helpful in debugging what html belongs to which component - we may fall back to using css occasionally where it makes sense, but it should be very rare Co-authored-by: Theo Ephraim <theo@systeminit.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
did some digging into latest tooling and best practices for tailwind/css/etc.
Hopefully these small quality of life improvements will help make things easier and keep things tidy.
Some quick guidelines on tailwind classes:
clsxandtwhelpers