CommunityNews

CommunityNews

Goodbye CSS Modules, Hello TailwindCSS

Implementing an app redesign is never routine nor easy. Two weeks after I was hired at Polytomic, I began implementing the app’s first redesign since the founding of the company. The technology choices and how to get it done were left up to me.

Our frontend codebase is a single-page application powered by Create React App (CRA), written in TypeScript, and using GraphQL for the API. The existing styling approach used CSS Modules without a design system.

CSS Modules are CSS files in which all class and animation names are scoped locally by default. They get compiled as part of the build step—with bundler technology like Webpack—and are natively supported by CRA.

Read in full here:

This thread was posted by one of our members via one of our news source trackers.

Where Next?

Popular Frontend topics Top

First poster: bot
The No-Framework Framework: JavaScript Without React Part I. How I improved my programming speed by replacing React with plain JavaScrip...
New
First poster: bot
When web accessibility comes to mind most people think of just adding an alt text to an image, but there is much more to it! This article...
New
First poster: bot
Last year I created Pomodone, a small time tracking application based on the Pomodoro technique of working in 25 minute intervals. It’s a...
New
First poster: bot
Hey! We’re getting really close to releasing React + Vue support for Tailwind UI, so I thought it would be interesting to share some of t...
New
First poster: bot
If you are a long-time React user, you might be wondering for the past few years about when Concurrent Mode/Suspense will ship. The plans...
New
First poster: bot
JavaScript has come a long way since I knew it as the “D” in DHTML. For anyone like me, who’s been reluctant to use the latest syntax tha...
/js
New
First poster: bot
CSS Fingerprinting is a technique of tracking and gathering information on site visitors. This method exploits the nature of CSS to track...
New
mssantosdev
Our take on how to build a frontend style guide with Phoenix Components, Atomic Design and plain CSS, with focus on reusability and code ...
New
szajbus
Monaco is state-of-the-art browser-based code editor that powers VS Code. Let’s see how to integrate it with Phoenix LiveView using esbuild.
New
New

Other popular topics Top

Exadra37
I am thinking in building or buy a desktop computer for programing, both professionally and on my free time, and my choice of OS is Linux...
New
PragmaticBookshelf
Design and develop sophisticated 2D games that are as much fun to make as they are to play. From particle effects and pathfinding to soci...
New
AstonJ
In case anyone else is wondering why Ruby 3 doesn’t show when you do asdf list-all ruby :man_facepalming: do this first: asdf plugin-upd...
New
PragmaticBookshelf
Learn different ways of writing concurrent code in Elixir and increase your application's performance, without sacrificing scalability or...
New
mafinar
This is going to be a long an frequently posted thread. While talking to a friend of mine who has taken data structure and algorithm cou...
New
PragmaticBookshelf
Rails 7 completely redefines what it means to produce fantastic user experiences and provides a way to achieve all the benefits of single...
New
PragmaticBookshelf
Leverage Elixir and the Nx ecosystem to build intelligent applications that solve real-world problems in computer vision, natural languag...
New
sir.laksmana_wenk
I’m able to do the “artistic” part of game-development; character designing/modeling, music, environment modeling, etc. However, I don’t...
New
PragmaticBookshelf
Explore the power of Ash Framework by modeling and building the domain for a real-world web application. Rebecca Le @sevenseacat and ...
New
PragmaticBookshelf
Overarching tutorial for Python beginner and intermediate developers that teaches web development with the Flask framework. Miguel Gr...
New