build: add tailwind-indicator #10
Open
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
Th1nkK1D
requested changes
Oct 9, 2023
There was a problem hiding this comment.
Nice trick. I had never seen that before. Let's give it a try.
I left one comment and to avoid making other people confused, can you add some short description as a sub-item of Tailwind in the "Tech Stack" section of README.md?
- [TailwindCSS](https://tailwindcss.com)
- //Briefly explain here what will other dev see on the development server| <script> | ||
| let showIndicator = false; | ||
|
|
||
| if (process.env.NODE_ENV === 'development') { |
There was a problem hiding this comment.
- Vite recommended using
import.meta.env.DEVinstead ofprocess.env.NODE_ENV(funny enough I thought process.env wasn't gonna work but it did) source - Since we assigning a boolean to another boolean, we can just use
const showIndicator = import.meta.env.DEVOr just put import.meta.env.DEV in the #if condition without script tag at all is also working
There was a problem hiding this comment.
Actually, I suggest moving the showing logic out of this component. This component should just be the indicator. Let the component that uses it decide to show it or not, so move the #if logic to the layout.
# for free
to join this conversation on GitHub.
Already have an account?
# 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.
Inspired from shadcn-ui/next-template
indicator show media query size for tailwind.
been use one time and every addicted to it, this one show on your left bottom screen it show size of current media query only when development which can be call from process.env.NODE_ENV.
it's not a components just helper function so maybe no need for histoire?
and also add more more theme/screens in tailwind.config.js but still keep base only one
md: '672px'
any suggestion would be cooool kub.
with ❤️