DEV Community

Cover image for How to Create Modern Cards using React and Tailwind

How to Create Modern Cards using React and Tailwind

Francisco Mendes on November 13, 2021

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...
Collapse
 
shaglock profile image
Ilya Shaplyko • Edited

Is there any reason why you moved the styles to separate CSS file with @apply instead of writing them directly in JSX?

Collapse
 
franciscomendes10866 profile image
Francisco Mendes

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. 😊

Collapse
 
optimbro profile image
Rahul

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?

Thread Thread
 
j471n profile image
Jatin Sharma

The answer is No, By default, Tailwind only removes unused classes that it generates itself, or has been explicitly wrapped in a @layer directive. It will not remove unused styles from third-party CSS.

Thread Thread
 
franciscomendes10866 profile image
Francisco Mendes

It's correct 💪

Collapse
 
pra3t0r5 profile image
Pra3t0r5

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.

Collapse
 
shaglock profile image
Ilya Shaplyko

sorry, what I meant is not inline styles, but Tailwind classes.

Collapse
 
femil profile image
Femil Savaliya

because you can use one @apply style in multiple time in project :)

Collapse
 
ldb profile image
LDB • Edited

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.

Collapse
 
johnatanetges profile image
Johnatan Etges

Hey! I got it! just follow the official starting guide. tailwindcss.com/docs/guides/create...

Collapse
 
franciscomendes10866 profile image
Francisco Mendes • Edited

Thanks 😊 Did you configure Tailwind?

Collapse
 
ldb profile image
LDB

I just installed tailwind using:
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Thread Thread
 
ldb profile image
LDB

screenshots:

imgur.com/a/gQ9EjBd

Thread Thread
 
franciscomendes10866 profile image
Francisco Mendes

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?

Collapse
 
johnatanetges profile image
Johnatan Etges

Same for me. Did you find what is going wrong?

Collapse
 
abhishekpurecode profile image
abhishek

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/

Collapse
 
official_fire profile image
CoderZ90

Very beautiful UI design

Collapse
 
franciscomendes10866 profile image
Francisco Mendes

I'm glad you liked it 😊

Collapse
 
official_fire profile image
CoderZ90

Yep

Collapse
 
jishan profile image
G Shan

Nice

Collapse
 
franciscomendes10866 profile image
Francisco Mendes

Thanks 🤗

Collapse
 
optimbro profile image
Rahul

Great designs btw :)

Collapse
 
franciscomendes10866 profile image
Francisco Mendes

Thanks! But I actually put together two or three designs that I saw on dribbble to get this result. 😄

Collapse
 
dolcekar profile image
Dolcekar

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!

Collapse
 
rjitsu profile image
Rishav Jadon

Is there a way we could write the styles in html and generate the css file seperately and clean the html from class names?

Collapse
 
franciscomendes10866 profile image
Francisco Mendes

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.

Collapse
 
ericamontes profile image
EricaMontes

Very Good Work and this is best information marry me spell

Collapse
 
pmioduszewski profile image
pmioduszewski

Nice one! THX!

Collapse
 
adwait12345 profile image
adwait12345

really great

Collapse
 
franciscomendes10866 profile image
Francisco Mendes

Thank you very much 💪

Collapse
 
franciscomendes10866 profile image
Francisco Mendes

Hello 👋

Some comments have been hidden by the post's author - find out more