Creating a responsive design system can be... let's say overwhelming, especially for beginners. But that's why you're here, and I'll make sure to help you understand everything you should need! In this blog post, we’ll dive into how you can leverage Tailwind CSS to create reusable class collections that adapt to different screen sizes.

Why use a fixed design system? Because this is a bit of effort that can save you a lot of time in the future, while still giving you the option to customize your UI as you please! It's what popular libraries like 

 do to make working with Tailwind easier, and what we'll also be doing today!

Tailwind is a utility-first CSS framework packed with CSS classes that you can use to build literally anything you can image, directly in your markup code, and unlike traditional CSS frameworks, Tailwind doesn’t provide components. It just offers low-level classes that allow you to construct your own designs without fighting to override styles, so what we're doing today might seem like a step backwards, but it's more like a "meet me in the middle" situation, where we leverage both tailwind and are able to have lightweight responsive "components".

If you don't quite understand what this means yet, let's just get straight to the point and build our responsive design system.

First things first, let’s get Tailwind CSS set up in your project. You can install Tailwind via npm:

npm install -D tailwindcss
npx tailwindcss init

 file where you can customize your Tailwind setup, but you probably already know this!

Tailwind CSS makes responsive design easy with its breakpoints, which can also be inserted into your markup and apply styles conditionally. The default breakpoints are:

✦

We'll be using these two directives to create reusable "components" for our Tailwind design system, so before moving on, let's also learn how they work!

 directive in Tailwind CSS is used to organize your styles into different layers. They help control the order in which your styles are applied, making it easier to manage and override them. Tailwind includes three layers: base, components, and utilities.

 directive allows you to extract a set of utility classes into a single class, making your code more 

 (Don't Repeat Yourself). This is particularly useful for creating reusable class collections, and will be the foundation of our design system.

Today we'll be setting up styles for the following items: 

Still, we'll be keeping things pretty basic, since the purpose of this post is to show you how design systems are set up and how they work in an app that uses Tailwind!

We use these utilities this to easily create reusable, responsive text styles.

@layer components {
  .heading {
    @apply text-2xl md:text-3xl lg:text-4xl font-bold text-gray-800;
  }
  .subheading {
    @apply text-xl md:text-2xl lg:text-3xl font-semibold text-gray-600;
  }
  .body-text {
    @apply text-base md:text-lg lg:text-xl text-gray-700;
  }
}

<h1 class="heading">This is a Heading</h1>
<h2 class="subheading">This is a Subheading</h2>
<p class="body-text">This is some body text. It’s nice and readable.</p>

Cards are essential components used in UI designs. Let’s make them responsive.


@layer components {
  .card-responsive {
    @apply bg-white rounded-lg shadow-md overflow-hidden;
    @apply sm:flex sm:flex-col md:flex md:flex-row;
  }

  .card-header-responsive {
    @apply p-4 bg-gray-100;
    @apply sm:w-full md:w-1/3;
  }

  .card-body-responsive {
    @apply p-4;
    @apply sm:w-full md:w-2/3;
  }
}

<div class="card-responsive">
  <div class="card-header-responsive">Card Header</div>
  <div class="card-body-responsive">Card Body</div>
</div>

@layer components {
  .flex-responsive {
    @apply flex flex-col md:flex-row;
  }
}

<div class="flex-responsive p-4">
  <div class="w-full md:w-1/2">Left</div>
  <div class="w-full md:w-1/2">Right</div>
</div>

@layer components {
  .grid-responsive {
    @apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4;
  }
}

@layer components {
  .p-responsive {
    @apply p-4 sm:p-6 md:p-8 lg:p-10;
  }

  .m-responsive {
    @apply m-4 sm:m-6 md:m-8 lg:m-10;
  }
}

<div class="p-responsive bg-gray-200">Responsive Padding</div>
<div class="m-responsive bg-gray-200">Responsive Margin</div>

If you've added all of these utilities neatly inside a CSS file, you'll have something that looks like this:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .heading {
    @apply text-2xl md:text-3xl lg:text-4xl font-bold text-gray-800;
  }

  .subheading {
    @apply text-xl md:text-2xl lg:text-3xl font-semibold text-gray-600;
}

  .body-text {
    @apply text-base md:text-lg lg:text-xl text-gray-700;
  }

  .card-responsive {
    @apply bg-white rounded-lg shadow-md overflow-hidden;
    @apply sm:flex sm:flex-col md:flex md:flex-row;
  }

  .card-header-responsive {
    @apply p-4 bg-gray-100;
    @apply sm:w-full md:w-1/3;
  }

  .card-body-responsive {
    @apply p-4;
    @apply sm:w-full md:w-2/3;
  }

  .flex-responsive {
    @apply flex flex-col md:flex-row;
  }

  .grid-responsive {
    @apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4;
  }

  .p-responsive {
    @apply p-4 sm:p-6 md:p-8 lg:p-10;
  }

  .m-responsive {
    @apply m-4 sm:m-6 md:m-8 lg:m-10;
  }
}

If you want to see this in action, I've created 

 that contains all of the above code! If you resize the viewport, you should see that none of our elements go out of bounds, and although they're not fancy or anything, they all look good even when being rendered on a small width!


You've made it this far, congrats! Hopefully, you now have a solid foundation for creating a responsive design system with Tailwind by using reusable class collections and the @apply directive!

Remember, this is just the baseline for building something really scalable and robust, which can improve development speed in the long run, but it is quite a big commitment, and might not be a good fit for every project, as with any approach!


See you next time, happy coding! 👋🏻

Building a responsive design system with Tailwind CSS

Listen, if you don't understand Next.js routing by the time you're done reading this, I owe you a coffee! Whether you're a complete beginner or a seasoned pro, this article will hopefully walk you through everything you need to know. We'll cover the basics, and dive into the finer details! So, buckle up, and let's start!

If you're here then you probably already know that Next is a super powerful React framework that simplifies the development of server-side rendered (SSR) applications. One of its 

 features is the built-in routing system, which allows devs like you and me to create robust, scalable apps with little to no annoying configs. In Next, routing can be either static or dynamic, and we'll be focusing on the latter in this post.

Dynamic routing enables you to create routes that change based on user input or other variables. For instance, consider this blog *wink*! It's also made with Next.js, and each post has a unique URL based on its title. Dynamic routing makes this possible without hassle.

With its release in 2016, Next introduced a file-based routing system that automatically maps files in the 

 directory to corresponding routes. For example, 

Now with dynamic routing, we're allowed to define routes that include variables. This is achieved using square brackets in the file name, such as 

, which would match any URL pattern like 

Dynamic routing combined with SSR ensures that each page is pre-rendered on the server with the necessary data before being sent to the client. This results in faster load times and better SEO. When a request is made to a dynamic route, Next.js fetches the data required for that specific page, renders it on the server, and then sends the fully-rendered HTML to the client.

Step-by-Step Guide to Implementing Dynamic Routing (Pages Router)

I think that's enough talk, so to relieve you of your boredom, we'll get straight into the code. We'll be creating a project from scratch and implementing dynamic routing step by step, and then have the final product in our hands! 🤓

Create a new Next.js project if you haven't already:

npx create-next-app my-nextjs-app
cd my-nextjs-app

Follow the steps for creating the app. For this project, I chose not to use a src directory.

As previously mentioned, let's say we want to create a blog where each post has a unique URL based on its ID. Start by creating a new file in the 

mkdir pages/posts
touch pages/posts/[id].js

, we'll fetch the data for the post based on the id parameter:

import { useRouter } from 'next/router';

const Post = ({ post }) => {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>{post.title} - ID: {id}</h1>
      <p>{post.content}</p>
    </div>
  );
};

export async function getStaticPaths() {
  // Replace with your data fetching logic
  const posts = [{ id: '1' }, { id: '2' }];

  const paths = posts.map(post => ({
    params: { id: post.id },
  }));

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  // Replace with your data fetching logic
  const post = { id: params.id, title: `Post ${params.id}`, content: 'This is the post content' };

  return { props: { post } };
}

export default Post;

To navigate to these shiny new dynamic routes, use the 

import Link from 'next/link';

const Home = () => {
  return (
    <div>
      <h1>My Blog</h1>
      <ul>
        <li>
          <Link href="/posts/1">
            Post 1
          </Link>
        </li>
        <li>
          <Link href="/posts/2">
            Post 2
          </Link>
        </li>
      </ul>
    </div>
  );
};

export default Home;

By the end of this implementation, your project directory should be looking like this:

Implementing Dynamic Routing (The New Way - App Router)

Next.js introduced the App Router in version 13. This router is designed to simplify routing and enhance the performance of Next.js applications compared to the older Pages Router.

 Just like the Pages Router, but with a new structure.

 By default, all components in the app directory are server components, enabling better server-side rendering.
- 

 A new feature allowing you to define shared layouts across multiple pages.


If the pages router would look something like this:
pages/


├── index.js
├── about.js
└── posts/
    └── [id].js



Then the equivalent with the app router will be:


app/
├── layout.js
├── page.js
└── posts/
    └── [id]/
        └── page.js


And below, a short implementation of the app router, with fetching and dynamic routes: 


// app/layout.js
export default function Layout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

// app/page.js
import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>Home Page</h1>
      <ul>
        <li>
          <Link href="/posts/1">Post 1</Link>
       </li>
       <li>
          <Link href="/posts/2">Post 2</Link>
       </li>
      </ul>
    </div>
  );
}

//app/posts/[id]/page.js
async function fetchPostData(id) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
  const data = await res.json();
  return data;
}

export default async function Post({ params }) {
  const { id } = params;
  const data = await fetchPostData(id);

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  );
}

 Files or folders with square brackets (e.g., [id], [slug]) denote dynamic segments. These will match the corresponding part of the URL and make it available via the params object in the component.

 In the dynamic components, you can fetch data using fetch or any other data-fetching library directly in the component. The params object will contain the dynamic segments from the URL, allowing you to make requests based on these parameters.


: Next.js optimizes your dynamic routes by generating static pages at build time. This means your pages are served lightning-fast with minimal server load.

: Next.js prefetches linked pages in the background, speeding up navigation.

: It's a good practice to serve a fallback page while your dynamic route data is being fetched, providing a smoother user experience.

Your brain is now way bigger from all this dynamic routing information! From setting up a project to creating dynamic routes and fetching data, we've covered all the core steps! And to close things off, know that Next.js's dynamic routing is not only powerful but also incredibly flexible, allowing you to build scalable applications, Ws all around!

Mastering dynamic routing in Next.js - step by step

Welcome to an your very own in-depth guide on performance optimization in React 19!

Whether you're an experienced developer or a beginner, this post is packed with useful information and tricks that will help you take action and make that React app blazing fast! *woosh*

React 19 brings a host of exciting features aimed at enhancing performance and developer experience. Here are some of the key highlights:

: Automates performance optimizations, reducing unnecessary re-renders and streamlining development​

: Enable server-side rendering for components, improving initial load times and overall performance​

: Including useFormStatus for better form handling and use for simpler custom hooks​

: Improved scheduling and prioritization for smoother user experiences​

: Better type inference and definitions, making type-safe development easier​

: A new way to handle imperative logic directly with the DOM

We'll start with the shiny new and improved server components, since this is probably the most exciting part of this article! Then, we'll move on to some info about lazy loading, virtualization, tree shaking, and finally, image optimization!

Suppose we are building a blog application where we want to display a list of posts fetched from a server. Using React Server Components, we can fetch the data and render the HTML on the server before sending it to the client.

For this example, our project files will be organized like this:

/src
  /components
    /client
      PostListClient.js
    /server
      PostListServer.js
      PostItemServer.js
  App.js
  index.js

First, we create our server-side components. These components will fetch data and render HTML on the server:



// src/components/server/PostItemServer.js
import React from 'react';
  const PostItemServer = ({ post }) => {
    return (
      <div>
        <h2>{post.title}</h2>
        <p>{post.body}</p>
      </div>
    );
};

export default PostItemServer;


// src/components/server/PostListServer.js
import React from 'react';
import PostItemServer from './PostItemServer';

const fetchPosts = async () => {
  // Simulate a data fetch
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await response.json();
  return posts.slice(0, 10); // Limit to 10 posts for this example
};

const PostListServer = async () => {
  const posts = await fetchPosts();

  return (
    <div>
      {posts.map((post) => (
        <PostItemServer key={post.id} post={post} />
      ))}
    </div>
  );
};
export default PostListServer;

Next, we create client-side components that will be used to integrate with the server-side components:

// src/components/client/PostListClient.js
import React, { useEffect, useState } from 'react';

const PostListClient = ({ serverComponent }) => {
  const [serverHtml, setServerHtml] = useState(null);
  useEffect(() => {
    const fetchServerHtml = async () => {
      const response = await fetch('/api/render-post-list');
      const html = await response.text();
      setServerHtml(html);
    };
    fetchServerHtml();
  }, []);

  return (
    <div dangerouslySetInnerHTML={{ __html: serverHtml }} />
  );
};

export default PostListClient;

We need an endpoint to render our server component and return the HTML. This is typically handled by your server setup (Node.js/Express, etc.).

Finally, we integrate our client-side component into the main application:

// src/App.js
import React from 'react';
import PostListClient from './components/client/PostListClient';

const App = () => {
  return (
    <div>
      <h1>My Blog</h1>
      <PostListClient />
    </div>
  );
};

export default App;

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.hydrate(<App />, document.getElementById('root'));

: PostListServer fetches posts and renders them using PostItemServer. This component is rendered on the server.



: PostListClient fetches the pre-rendered HTML from the server endpoint and injects it into the DOM using dangerouslySetInnerHTML.



: An Express.js server serves the pre-rendered HTML when /api/render-post-list is called.



: The App component integrates the PostListClient, and ReactDOM.hydrate hydrates the HTML on the client side, making it interactive.


This setup ensures that the initial load is fast because the server sends the HTML for the post list, and the client hydrates it to make it interactive. This can significantly improve the performance of your application, especially for data-heavy pages.

Lazy loading defers the loading of components until they are needed, which significantly reduces initial load times in a lot of cases. 

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

export default App;

For applications that render long lists, windowing can drastically improve performance by only rendering items that are visible on the screen. Libraries like react-window and react-virtualized are perfect for these scenarios, and here is how you can use them:

import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

const Example = () => (
  <List height={150} itemCount={1000} itemSize={35} width={300} > 
    {Row} 
  </List>
);

This technique minimizes DOM nodes, which means we have reduced render time and therefore improved performance!

Tree shaking eliminates dead code from your bundle. This technique is especially useful in large applications where unused code can bloat your bundle size. Tools like Webpack help implement tree shaking efficiently, and it is done by default in projects built with Vite:



// Webpack configuration example
module.exports = {
  optimization: {
    usedExports: true //enable tree shaking
  },
};

And now with this configuration, let's assume we have this code in our React app:

import React from 'react';
import ReactDOM from 'react-dom';
import Header from './components/Header';

// import Button from './components/Button'; // Intentionally not used
const App = () => (
  <div>
    <Header />
    {/* <Button /> */}
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));

After running the build, you can verify that tree shaking has worked by checking the output bundle. The 

 component should not be included in the final 

In Vite, this is done automatically, but there are things that you can add to your vite configuration file that can decrease your bundle size. Here is an example:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    minify: 'esbuild',
    sourcemap: false, // Disable sourcemaps for smaller bundles
    rollupOptions: {
      output: {
        manualChunks: undefined, // Allow Vite to manage chunk splitting
      },
    },
  },
});

Images are often the largest assets on a website, and add significant loading time to your final bundle, so optimizing them can greatly improve your app’s performance. If your app contains lots of them, you must definitely consider lazy loading images and using modern image formats like WebP and SVGs where possible:

import { LazyLoadImage } from 'react-lazy-load-image-component';

const ImageComponent = () => (
  <LazyLoadImage
    alt="A lazy loaded image"
    src="image.webp"
    effect="blur"
  />
);

export default ImageComponent;

 allows you to defer the loading of images until they are in the viewport, and that's a win for everybody since the initial loading time is decreased!

React 19 brings a whole bunch of new features and optimizations that can significantly enhance the performance of your apps. When we leverage server side rendering, lazy loading, tree shaking, virtualization, and the new React Compiler, we can ensure that our React apps are fast, efficient, and ready for the foreseeable future.

Don't take my word for it though, it's always good to read the docs with every update for more detailed insights and to stay updated with the latest in React development, so always keep an eye on 

David H.davidhaz.com

Performance optimization for React 19 - all you need

Other Posts

Building a responsive design system with Tailwind CSS

Mastering dynamic routing in Next.js - step by step