Tailwind CSS VS emotion

Tailwinds makes life so much easier for people struggling with vanilla css. Tailwind provides low-level utility classes, that enables you to make unique designs without leaving your html file. For more information read the official documentation.

Inspect Tailwind's page (https://tailwindcss.com/) and see how they name everything. If you went the utility class route, that puts a lot less pressure on coming up with some unique name for each module/section.

I suck at frontend and design. Have you looked at the modern CSS frameworks like https://tailwindcss.com/? It can give you pretty results without thinking a lot on the design (which is essential but difficult for some people).

Make sure that you have Node.js and Tailwind CSS installed.

If you don’t know any JS frameworks, you could use a CSS framework e.g Tailwind CSS that achieves the same goal as component libraries, just in a different way.

why not use Windi CSS or Tailwind css?

Last but not least, we will use Tailwind CSS to style the components. Tailwind CSS makes it a bit harder to read HTML code but allows speedy prototyping, allowing us to recreate the Netflix UI in a blink of an eye.

Recently I came across a CSS framework called Tailwind CSS.

The only addition that I have to this answer is that Tailwind CSS simplifies the design of a site.

Tailwindcss - CSS utility framework

Emotion as CSS library

I'm using React for making the UI element dynamic so that we can easily change the status of a step from pending to complete. Also using the emotion library for writing css styles with JavaScript because it's efficient and fun! We can achieve the same result using CSS (SCSS, SASS).

The default style library used for generating CSS styles for MUI components is emotion.

Emotion

That sent me on a lengthy wild goose chase. Stack Overflow had one question with no accepted answer. Babel was the primary suspect so I tried reordering all my presets and then upgrading to the latest version. I poked around in the Webpack config. The Emotion repo’s issues page wasn’t any help. I tried completely switching up our Emotion implementation but that created a whole new set of problems.

My site uses Chakra UI for theming, which uses Emotion -- a CSS-in-JS library -- under the hood. Emotion will happily render tons of tags when statically generating HTML from your React components. For most use cases where you render React on the server (statically or not), this is desirable. In the case of RSS/Atom feeds, this is pretty useless.

Solution

The solution here is to strip all the and tags from the generated HTML. Rather than summoning The One whose Name cannot be expressed in the Basic Multilingual Plane by trying to use regex here, I found this library to help me with this task:

const cleanHtmlContent = stripHtml(htmlContent, {
    onlyStripTags: ['script', 'style'],
    stripTogetherWithTheirContents: ['script', 'style'],
}).result;

Enter fullscreen mode Exit fullscreen mode

The end result

I now have serve RSS, Atom and a JSON Feed for your reading pleasure. Most of the relevant code can be found here

Future plans

At some point I want to diversify my writing output by not only writing about tech. And even within the topic of tech there are many sub-topics I could write about, not all of which are equally interesting to every reader (all 5 of them, including my mom 👩‍👦). I'm planning to introduce tags to allow filtering content once I have enough of it.

Once I have tags, I would like to start supporting dynamic feeds so readers can subscribe only to the stuff they actually want to read. I imagine building an endpoint like this:

/feeds/by-tags.xml?tags=tag1,tag2

Enter fullscreen mode Exit fullscreen mode

I'm curious if others are doing this!

This was the biggest chunk of work for us. We've gone through a styling change before with Material-UI when they moved from inline styles to JSS, but this time Material-UI 5 moves away from JSS as the default styling solution to emotion. We've been relying heavily on JSS for the majority of our components, so lots of them looked something like this...

"style": { "description": "The file extension to be used for style files.", "type": "string", "alias": "s", "default": "css", "x-prompt": { "message": "Which stylesheet format would you like to use?", "type": "list", "items": [ { "value": "css", "label": "CSS" }, { "value": "scss", "label": "SASS(.scss) [ http://sass-lang.com ]" }, { "value": "styl", "label": "Stylus(.styl) [ http://stylus-lang.com ]" }, { "value": "less", "label": "LESS [ http://lesscss.org ]" }, { "value": "styled-components", "label": "styled-components [ https://styled-components.com ]" }, { "value": "@emotion/styled", "label": "emotion [ https://emotion.sh ]" }, { "value": "styled-jsx", "label": "styled-jsx [ https://www.npmjs.com/package/styled-jsx ]" } ] } }, ...

Mantine no longer depends on react-jss, we’ve migrated everything to emotion – based on our internal tests styles management became ~ 40% more performant and contribute ~15% less to bundle size (see comment if you want to find out more)