3 Column Card using Tailwind

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, good work on this one. Though I can't really give any advice about tailwind since I haven't used that one. But for you query, we can fix that.

  I see that in your hover state, you are adding border-width: 2px, that's what makes the container's size resize. So instead what you want to do is that.

  Add a declaration in your selector border: 2px solid transparent and when you hover on it, you just transition border-color. Because in your previous hover state, you are adding 2px which will create an extra space right. So to prevent that, you initially add that border-width, so when you hover, you are just adding a color to that border, hence not creating a space and will not make the container resize.

  Also, it would be better if you not used height: 100vh in your body selector, because this will only allow the body tag to have a height of 100% of the viewport. Instead you should add min-height: 100vh. This will make sure that your layout will have a minimum height, based on the viewports height. Also add a padding to the top, as well as the bottom.

  For the button alignment, since the text are being wrapped right, it pushes down the button as well, that is why it changes. I think you could get away with this using grid :>

  Overall, you did good and the mobile state is fine as well^^

  2

  ---

  

  Adam•430

  @aemann2Posted over 3 years ago

  @pikamart thanks for the suggestion, that makes sense! I knew it had something to do with the width of the border but it hadn't occurred to me to try using transparent.

  And good catch on the min-height--that's what I use when I do my CSS boilerplate, but since I just started using Tailwind I don't have any of that set up yet. I'll do a little work on this tomorrow and add in min-height there.

  0
• 

  argel omnes•1,800

  @argelomnesPosted over 3 years ago

  Hey Adam,

  I've used Tailwind and I totally agree with your second sentence. The buttons are jumping off because they don't have a border in their default state as mentioned by @pikamart. You can remove the hover prefix to solve this. I have a different suggestion for keeping the buttons to the bottom though: flexbox. So experiment.. I guess. And see what you prefer.

  I'm also not sure if I'm using Tw right. The demos I've watched usually only use the default classes. And that's the approach I tried to stick with in my recent challenge. At the moment, I still prefer writing my own and maybe 20% or less Tailwind. Yes, you're missing something. As I've mentioned earlier, using flexbox to push the buttons down. The flex utilities available are very handy. Also use purge or JIT to make your final CSS output smaller.

  1

  ---

  

  Adam•430

  @aemann2Posted over 3 years ago

  @argelomnes I think I know what you mean with flexbox now that I think about it...I could maybe do flex-direction: column and set justify-content to space-between or space-around (or something like that) rather than rely on padding. I'll play around with it tomorrow and see if I can get it to work better.

  I'm going to watch some TW demos tomorrow and see if I can pick up any sort of workflow habits. There's so much duplicated code in my elements and it's a mess to maintain them or change anything, so I guess I could extract components. But I don't like the extra step of having to compile the code and wait to see what it does...like, why not just use CSS if I'm going to extract components?

  I feel like the default TW components get me about 80% where I need to be, but I find myself fighting with TW for the other 20%. I think I'm going to keep using it for this month, and if I don't start to like it by the end of 30 days I'm just going to go back to SASS / BEM.

  I didn't know that about the final CSS output. I was wondering why it was loading so slowly...I'll try to figure out how to do that.

  0

  

  Adam•430

  @aemann2Posted over 3 years ago

  @argelomnes Figured out purge...I've never really configured or worked directly with bundlers, so I found a walkthrough for Snowpack and TW and sort of fumbled my way through it. Seems like there's no other way to do this outside of using a bundler? If so, is there a certain bundler / workflow you prefer when you're doing this?

  It seems like a lot of extra work to do for a small project, but without purging, the built .css file is like 4mb, so it's also hard to justify not doing it...

  0

  

  argel omnes•1,800

  @argelomnesPosted over 3 years ago

  nice! I used to have a Gulp config. Now, my workflow is enabling JIT + using BrowserSync. I find this simpler. It's like you only have a reset to start with. TW generates only the classes you used and deletes the ones you removed from your HTML.

  1