Picking a styling tool

Picking a styling tool
When it comes to styling your Gatsby site, there is no right or wrong way of styling it. It
will totally depend on your existing skill set, how coupled you want your styles and JS to
be, and your own personal preferences. I thought I would end this section by looking at a
few common scenarios and what styling implementation I would use for each of them:
• My experience with styling is limited: If you are new to styling applications, I
would suggest using vanilla CSS. The fundamentals you will learn using this
implementation are built on in every other implementation. By learning the basics,
you will be able to pick another implementation more easily in the future.
• I don’t want to spend lots of time styling my application: If you are looking for the
option with the least setup, then look no further than Tailwind. Using utility classes
will save you a lot of time, as you do not need to create your own classes.
• I don’t like context switching: In this case, I would lean toward Styled Components
or Tailwind, as in both implementations your styles are located next to your markup
– one file and one source of truth.
• I have used CSS and want to build on that: Using Sass would be a great option for you,
as you can write the CSS you know and love but also enhance it with the Sass toolset.
Styling with CSS 33
At this point, you should feel ready to make an informed choice about which styling
tool is for you. I strongly suggest that you only implement one of the styling choices
outlined in this chapter instead of trying to mix and match. If you add multiple styling
implementations, you can end up in a position where your site styles don’t seem to match
up. This is because one implementation can override another. By sticking to one method,
you have the added benefit of keeping your site’s style consistently uniform, which is
important, as it reinforces your brand.
Now that you have made a decision, let’s start looking at implementations


Stay Connected

We don’t spam! Read our privacy policy for more info.

Leave a Comment

Your email address will not be published. Required fields are marked *

Shopping Cart