styled-components VS PostCSS

Supports styled-components for React users ;-)

We wanted the ability to serve creator-specific CSS styles for each page. As a result, we couldn’t simply hardcode the styles in the applications. Performance was also an important factor so we wanted to avoid css-in-js frameworks like styled-components, which increase bundle size. More info on the impact of css-in-js on performance here.

I'm not sure if this is a response to my comment about styled-components. If so, styled-components is something specific. https://styled-components.com/ (Emotions library also has this as an option too). It's not just a wrapper. And you wouldn't be able to use it in conjunction with bootstrap classes unless you took additional steps in the setup. But nevermind about this. It's not necessary, I was just taking a guess as to what code you were referring to.

As already mentioned in the previous section, a certain flavor of functional programming can be quite elegant in JavaScript. The simplicity of the object model makes it very convenient to organize and operate on data. Dynamic typing and type coercion allows you to take certain shortcuts (unless you are trying to sort a list of numbers...). Use the strengths of whatever language you are using to your advantage. It is good to push the boundaries of the language to create new things. For example, styled components and GraphQL have normalized the use of tagged template literals for domain specific languages (DSLs). But in general, you'll have a much better time working with the grain of the language than against it.

I want to be clear that I am far from a TailwindCSS hater. I think the framework is awesome and I am looking forward to its future in the space. I definitely feel like I need more time with it and more experience working with it, but right now I'm more excited about Styled Components (which I've taken a love to from Josh W. Comeau's CSS for JavaScript Developers Course) and also Vanilla Extract which I plan to look into more for future projects. With other tools like Chakra UI also looming over my shoulder competing for my headspace with styling, these small frustrations from Tailwind keep adding up and I'm not sure if I'll be using it for my own personal projects anymore.

You could checkout styled-components which allows you to make components and add css to them in javascript. With this, you can create variants, and wherever you need a specific variant, just create a prop called variant, and pass in which specific style of component you need. Note you do need the babel-plugin-styled-components for it to work in nextjs

Yo it dis style components (and they rock)

Let's face the fact that this calculation is not straightforward and hard to read, even when you are familiar with the technique. Luckily for us, we can extract SASS mixins, or utility functions for various CSS-in-JS libraries (like styled-components).

Before diving into very low level details, reading this architecture is a must. Almost all of the low level detailed info are available in API page with multiple theoretical example, generated from static typing jsDoc. The intention of this series is to provide them in digestible and pragmatic way. For that many references from PostCSS plugins will be drawn. This will get extended by diving deep into the codebase as well. As mentioned in the arch doc, the AST conversion is split into. two parts: tokenization and parsing for performance reasons. Lets get started with the basics:

PostCSS has plugins to replace the missing Sass behaviour.

Thankfully, what is far more appealing regarding Rails 7 is its additional support for esbuild and PostCSS, two very fast, very capable, and extremely customizable frontend build tools. While I'm bummed that there's no real config file shipping out of the box for esbuild, such things can be put together with the right resources. Maybe the community can step up.

PostCSS

Use Tailwind CSS, Bootstrap, Bulma, PostCSS, or Dart Sass to bundle and process your CSS, then deliver it via the asset pipeline in Rails. This gem provides installers to get you going with the bundler of your choice in a new Rails application, and a convention to use app/assets/builds to hold your bundled output as artifacts that are not checked into source control (the installer adds this directory to .gitignore by default).

PostCSS is a CSS processor that Tailwind relies on to do its magic.

For my last two personal websites I used Svelte (not Sapper or SvelteKit), married up with Page.js for client-side routing and Tailwind (+ PostCSS) for styling stuff. The sites are hosted from AWS S3 buckets with CloudFront for the CMS stuff. And because these projects are entirely personal I've not had to do a lot of worrying about the toolchain: both codebases are in git repositories; testing (when I bother) is manual; building/deployment are handled using various shell scripts.

Jekyll 4.1+ Tailwind CSS v2.2+ PostCSS 8.3+