DEV Community

Cover image for Building my site with Tailwind CSS

Building my site with Tailwind CSS

Samantha Ming on May 06, 2020

This is a 2 part series where I talk about the two main tech I used to build my new website, samanthaming.com. The first one I talked about my ex...
Collapse
 
turbopasi profile image
Pascal Lamers • Edited

Great Read ! You mention "Repeating CSS" and " ... One of the biggest annoyance of utility-first is the repeated classes ... ". That got me thinking, have you tried using the @apply feature from tailwind ?
tailwindcss.com/docs/extracting-co...

Haven't tried tailwind myself yet, but once I read the docs, I really liked the @apply feature and I can't wait to try it :)

I think you could do

<h1 class="blue-heading">Tibit Title</h1>

.blue-heading {
   @apply bold text-2x text-blue
}

like "grouping" talwind classes

Collapse
 
samanthaming profile image
Samantha Ming

Thanks for reading my article and the positive feedback Pascal πŸ˜„

Unfortunately @apply didn't work for me. I'm using stylus with VuePress. Something about the syntax that's not working πŸ˜– But I have used their theme() function and it works perfectly πŸ‘

h1 {
  font-weight: theme('fontWeight.semibold')
}

I'm terrible at naming things, it's one of the reasons I love about Tailwind -- No more class or id names. Instead, I just apply the style directly...and with that comes the benefits of speed and moving very quickly without thinking of class names πŸ˜†

Can't wait until you give Tailwind a try! I'm a huge fan πŸ‘

Collapse
 
richardeschloss profile image
Richard Schloss • Edited

@samanthaming , does the @apply statement work if you try specifying the language with the "lang" attribute? I've never tried multiple style blocks in a vue component, so I'm interested to know if this works:

<style lang="css" scoped>
/* Your tailwind css here */
/* Does @apply work here? */
</style>

<style lang="stylus" scoped>
/* Your stylus here (that you already have) */
</style>
Collapse
 
turbopasi profile image
Pascal Lamers • Edited

I am wondering if the theme () option is helpful when trying to create a darkmode/lightmode feature for a webapp πŸ€”πŸ€”

Collapse
 
jeremyrobert profile image
JΓ©rΓ©my ROBERT

Thank you for this interesting article, i love Tailwind ! Do you use PurgeCSS? If yes, I think you should modify this part of your code :

<CustomVueTitleComponent color="blue">
<CustomVueTitleComponent color="red">
<CustomVueTitleComponent color="green">

<!-- CustomVueTitleComponent.vue -->

<template>
  <h1 class="bold text-2x" :class="`text-${color}`"></h1>
</template>

To :

<CustomVueTitleComponent color="text-blue">
<CustomVueTitleComponent color="text-red">
<CustomVueTitleComponent color="text-green">

<!-- CustomVueTitleComponent.vue -->

<template>
  <h1 class="bold text-2x" :class="color"></h1>
</template>

tailwindcss.com/docs/controlling-f...

Collapse
 
samanthaming profile image
Samantha Ming

WOOOO, thanks for introducing me to PurgeCSS 🀩 I'm using VuePress, which uses PostCSS ... but I wonder if it's redundant to have both? -- but they do different things, so maybe I should include it πŸ€”

Collapse
 
mtpiercey profile image
Matthew Piercey

Awesome intro to Tailwind.

It's not for everyone, but like you said, if somebody's willing to put in a bit of work to figure out what all the classes mean, and they want to style their site/app from scratch using little more than their own imagination, there's really no easier/better way.

I'll definitely recommend this article to anybody that has to put up with my use of Tailwind, since I couldn't make a better argument for it myself.

Tailwind makes a daunting task a lot more approachable, and it's probably helped me write more maintainable /less redundant styles (since it's literally right there in the class names what they do, and there's less digging through a bunch of external Sass to find the custom class I needed to use), though I don't think I'd be able to do everything with Tailwind alone. But it's a super helpful tool, regardless.

I use the Tailwind Intellisense and Headwind Class Sorter VS Code extensions (along with a comprehensive Stylelint config) so the styles basically write themselves these days.

Collapse
 
jherseth profile image
JHerseth

Interesting read. I've used Bulma earlier on small hobby-projects and enjoyed it a lot. Never used Tailwind, but I read through much of the documentation and I liked the concept. Quite a different approach compared to bootstrap and bulma. I really want to try it out once and see if I'm able to at least make something half decent with it (bulma/bootstrap makes it quite easy to make good looking sites imo, but all my sites/projects tend to resemble each other... Probably more a failing on my part than the frameworks though)

Collapse
 
samanthaming profile image
Samantha Ming

Yup, a totally different approach from the standard CSS frameworks. If you have a design in mind, then Tailwind would be a good choice. But sometimes the cookie-cutter approach you get from CSS frameworks is might be what you need. So it really depends on the project. I say give Tailwind a try, and that way you will know which approach is best in which scenario 😊

Collapse
 
ivanesko69 profile image
Ivo

Love the difference explanation :) Now I will definitely try it :)

Collapse
 
miteshkamat27 profile image
Mitesh Kamat

This should be a good idea to start learning any new framework as we always think how should we start.

Collapse
 
sanchezdav profile image
David Sanchez

Awesome post and I loved your site! Thanks for sharing!

Collapse
 
samanthaming profile image
Samantha Ming

Thanks David for the positive feedback! It's now a lot easier to add more features to it too! Can't wait to continue building on it πŸ˜†