QwikDev
[DOCS] styles handling
How can the documentation be improved? we have in the tutorial some info about how to style an app but nothing is written in the official docs section. the following topics would be a nice enrichment:
- overview
- built in options (postcss, sass, scss)
- tailwind option (
qwik add tailwind)
-
useStyles$(https://qwik.builder.io/tutorial/style/styles/)- how to use
- output
-
useStylesScoped$(https://qwik.builder.io/tutorial/style/scoped/)- how to use
- output
- import with
?inline- when to use
i could start with it but would need to know where you want to have it and what to add as well to the above mentioned list 🙏
I also collected styling docs ideas a month ago, here my notes from discord.
Topics:
Different possibilities of styling
• Globally: import './styles.css'
• Component-specific styles: useStyles$
• Either Inline String or
• Load CSS file with ?inline
• Component-specific styles - SCOPED!: useStylesScoped$
• Either Inline String or
• Load CSS file with ?inline
• Dynamic style tags: style={{ background: state.background }}
• Explain Scoping
• useStyles$ Styles strings are treated as static - no dynamic strings for styling!
• Escaping Scoping in useStylesScoped$ using :global(...)
I think by now there are also efforts to enable css in js.
And I always encourage writing for people who have not worked with frameworks before. For some devs this might be the first one.
@wtho if you have a minute i'd appreciate if you could have a look at the current state and provide some feedback 🙏 https://github.com/BuilderIO/qwik/pull/1977