Figuring out Styles

Emotion.js

Gatsby-plugin-emotion: https://www.gatsbyjs.org/packages/gatsby-plugin-emotion/

Having used Styled Components once in my prior React project, naturally I was curious what are the differences between Emotion and Styled Components. Styled Components seem to have a larger user base at this point which may point to longevity of the project, however Emotion is smaler, faster, and have flexible ways of adding CSS to components. Eventhough I really liked how Kye explained the use of css-in-js is just a tradeoff you can read more about it here but I have some reservations about his thoughts about ways of CSS implementations. It might be one thing about providing multiple ways of achieving common goal of style setting. But at the end of the day, having too many different ways of doing the same thing would only lead to fragmentation of practices. Do we as a developer community need so many options? Unless those options are there because of certain scenarios that limit the use of other style setting methods, I think having a best practice should be the way to go. For one, having a developer community gathering around best practices allows for quicker adoption and maintainability down the road. https://github.com/emotion-js/emotion/issues/113 https://github.com/jsjoeio/styled-components-vs-emotion https://github.com/A-gambit/CSS-IN-JS-Benchmarks/blob/master/RESULT.md

Tailwind.css

Tailwind is a low-level utility-based framework that doesn't come with any prebuilt theme or s components. Let's faced it a lot of times developers/designers have an idea of what they want and typically create their own component and themes. So CSS frameworks such as Bootstrap and Foundation comes with unnecessary bloat that never make it into the final product.

Tailwind includes Normalize 8.0.0. To use Tailwind, we need a config file placed in the project root named tailwind.config.js. To generate the config file, run npx tailwind init or ./node_modules/.bin/tailwind init. You can specify a custom name for the config file by adding it to the end of the command. The config file generated by this command is minimal (empty) and you will add your custom changes to it to override the default Tailwind setup. To generate a complete configuration file that includes all of Tailwind's default configuration, use the --full option: npx tailwind init --full.

Combination of the two

Tailwind with Emotion demo: https://github.com/jlengstorf/gatsby-tailwind-demo using Tailwind v0.7.4

To use Tailwind with Gatsby & Emotion, we need the babel-plugin-tailwind-components package and incorporate it as a Babel plugin. To specify the plugin inside of Gatsby's babel config, we use the setBabelPlugin API inside of gatsby-node.js. The setBabelPlugin method takes in an object with the name and options properties.

Ran into an issue when trying to use Tailwind v1.0 beta3 release with babel-plugin-tailwind-components. The new theme color properties are not recognized when trying to use something like bg-gray-300. Submitted an issue to babel-plugin-tailwind-components git repository, see what author says

Thoughts

Fluid Typography can be added via a plain old CSS stylesheet, via Emotions way of global styles, or via a Tailwind plugin. Another thing that is important to me is implementation of vertical rhythm via the use of a modular scale. Guess now I just have to test it out.

TODO