Why you would want to do it and a step-by-step guide on how.
What is this❓ Another "how to" article (post)?!
Yes, it is.
What's in i...
For further actions, you may consider blocking this person and/or reporting abuse
Very helpful, thank you! I was hoping I could find a way to use twin.macro with tsdx, but it looks like it can't be done right now. Rather than using the styled-components
attrs
like you are here, I've decided just to stick with tailwinds using classnames only. I don't feel all that boilerplate is worth it just for the option of including vanilla-css if I ever need to.You're welcome Sheldon 🙂
I'm sure there is a way to get twin.macro working somehow, also, probably achievable with Twind.
I hear what you're saying about the
attrs
, however I do like my JSX more clean 🤷🏽♂️.Hi Yoav,
It's super useful the content, however I was having this issue when trying to run the
yarn build
Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)
.../src/index.css:1:0
1: @tailwind base;
^
2: @tailwind components;
3: @tailwind utilities;
Any idea how to prevent the
@
error ?I'm currently using the tsdx + tailwind + rollup-plugin-postcss + chromatic [ just installed]
Hi Marcos,
Glad you liked the post!
From the looks of it, seems like postCSS is not configured properly. But this is a shot in the dark without seeing the actual code. Are you getting this from trying to run the related posts' repo or your own?
I have started all over again
So im sorry for taking your time! I’m really not sure what could have be missing, likely something my tailwind config.
PS build took several minutes that was a bit unexpected
again thank you for the guide!
Happy it worked out!
Go build something awesome! 🙂
Nice article that goes deep into the tooling/setup side of things, but I'd love to see more on best practices and methodology, like examples of designing an actual button component, what props it should use, other kinds of components, etc.
Thanks for the feedback!
Sounds like a good follow up post :-)
Have also a plan for a post about publishing. Now, I'm stumped by which I should do first...
Thank you for the great info! Thanks to you, the setup was easy.
I'm actually stuck on something, so let me ask you a question.
When in JIT mode of Tailwind CSS, the build does not stop, but dist folder is made perfectly.
It works fine in JIT mode of the development environment.
f you have any advice, I would appreciate it.
I resolved it!
Happy you worked it out!
I usually hate doing this and you no doubt got many corrections on Twitter but... it's "pique someone's interest", not "peak". You occasionally hear people try and justify the use of "peak" after the error gets pointed out by saying that it is not grammatically incorrect to use "peak" and "taking someone's interest to the top" is what they actually meant... but it's still "pique".
It was a helpful article. Thanks.
Creating a React TypeScript Tailwind design system can be tricky because you need to balance Tailwind's simple style approach with the complexity of a TypeScript-based React app. It's like juggling simplicity with the need for detailed design.
Top Article! I had coded a React UI Kit based 100% on Tailwind!
Feedback are welcome 🙏
windy-docs.vercel.app/
Would love use all those things but my Next.js site with just tailwind and styled-components is already taking secs to render any page..using all those things you mention I think it would take a full min or more to render any page 😢
Seems like you should dig in to the problem you're having with your NextJs project @rangercoder99 .
I'd start by analysing you bundle with something like bundle analyzer.
You can check out how to set it up here: github.com/vercel/next.js/tree/can...
Quick note for anyone experiencing the same issue: there appears to be a PostCSS V8 dependency introduced with
rollup-plugin-postcss@4.0.1
but specifyingv4.0.0
when you install sorts it out.(Issue occurs when running
tsdx build
)Very deep article👍
Thanks ☺️
Great read thanks for the very helpful article! I'm getting this typescript error from the Button component. Anyone else getting this, am I missing something?
Types of property 'className' are incompatible.
Type 'string | undefined' is not assignable to type '"tailwind classes"'