Overview
One of my favorite components is undoubtedly cards and the reasons are very simple, they can have many uses.
In the same way t...
Some comments have been hidden by the post's author - find out more
For further actions, you may consider blocking this person and/or reporting abuse
Is there any reason why you moved the styles to separate CSS file with @apply instead of writing them directly in JSX?
It was simply because this way it's easier to read the code so I can do the coditional rendering properly and so I can make changes faster. It's just the approach I like to take when I work on styling components, in my view it's simpler and more intuitive to separate the contexts. 😊
I like this approach as well. So, when we use JIT mode, it still purges unused styles, and we have the same output as we were directly using utility classes in JSX right?
The answer is No, By default, Tailwind only removes unused classes that it generates itself, or has been explicitly wrapped in a
@layerdirective. It will not remove unused styles from third-party CSS.It's correct 💪
I highly recommend not placing any styles inside JSX, instead, write a styles constant in the same file, and outside the components return function.
That way react performs way better, since inline styles are reprocessed with every state change.
Outside-return and imported styles do not suffer from this performance impact.
sorry, what I meant is not inline styles, but Tailwind classes.
because you can use one
@applystyle in multiple time in project :)Thanks for the nice article. But it didn't worked on me. Cards are so big seems styles wasn't applied even though I followed the instructions.
Hey! I got it! just follow the official starting guide. tailwindcss.com/docs/guides/create...
Thanks 😊 Did you configure Tailwind?
I just installed tailwind using:
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
screenshots:
imgur.com/a/gQ9EjBd
From the image you shared, I'm not sure tailwind is properly configured. I say this because the styles are not being applied. If you try to edit something, does it have any effect?
Same for me. Did you find what is going wrong?
Designing modern cards with React and Tailwind CSS is a seamless process, marrying the efficiency of React components with the utility-first approach of Tailwind. Start by structuring a React component for the card, encapsulating content and functionalities. Integrate Tailwind's extensive set of utility classes to style the card, ensuring a sleek and responsive design. Leverage dynamic data binding in React to handle diverse card content effortlessly. Tailwind's flexibility allows for easy customization, enabling the creation of modern, visually appealing cards that align with the latest design trends while benefiting from React's modular and scalable architecture.
For more details, check out: purecode.ai/blogs/tailwind-cards/
Very beautiful UI design
I'm glad you liked it 😊
Yep
Nice
Thanks 🤗
Great designs btw :)
Thanks! But I actually put together two or three designs that I saw on dribbble to get this result. 😄
quick question, will Tailwind be conflicting with bootstrap for react library? I remember in 2018 I had an issue because I installed material UI and bootstrap to use for different elements. I am now picking up coding since that time and I feel like a beginner in many ways. The goal is to deploy this project to Heroku. Thanks!
Is there a way we could write the styles in html and generate the css file seperately and clean the html from class names?
If I understand your question correctly, I think my answer would be to use css-in-js, if you want to use it with Tailwind there is a library called twin.
Very Good Work and this is best information marry me spell
Nice one! THX!
really great
Thank you very much 💪
Hello 👋