Exploring Next.js-compatible libraries without Tailwind CSS for frontend development

In one of our latest blog posts, we delved into the advantages of using component libraries alongside Tailwind CSS for Next.js application development. While Tailwind CSS offers a versatile and efficient approach to styling, it may not be the ideal choice for every project due to its complex requirements and customization processes. In this follow-up post, we will explore alternative libraries that are Next.js, and TypeScript-compatible but do not rely on Tailwind CSS.

Disadvantages of Tailwind CSS

As stated above, Tailwind CSS has certain drawbacks that may complicate its usage.

1. Extensive customization: although Tailwind CSS provides a vast array of utility classes, customization beyond these classes can be complex and may require elaborate configuration. Developers looking for more unique designs may find themselves spending more time adjusting configurations.

2. Large class lists: as projects grow, the number of utility classes in the HTML markup can become overwhelming and affect code readability. This can make maintenance and collaboration with other team members challenging.

3. Limited themes: Tailwind CSS is known for its utility-first approach, which means it might not provide as much flexibility when it comes to theming and maintaining a consistent visual identity across the application.

4. Learning journey: while Tailwind CSS is relatively easy to get started with, understanding and effectively using all its utility classes can take time. Beginners might find it overwhelming at first.

 

Exploring alternatives

Now, what alternatives are out there for styling in Next.js applications?

1. Styled Components:

Styled Components is a popular library built for React and React Native that provides a more dynamic and component-based approach to styling in React applications. It allows you to write CSS code to style your components directly within your React components, establishing a code structure that is more encapsulated and easier to maintain. It also offers support for type checking, out-of-the-box theming, and Server-Side Rendering (SSR), making it a seamless fit for Next.js projects.

Nevertheless, there are some challenges when debugging and maintaining the code because, for instance, distinguishing between styled components and regular React components is difficult using the Developer React Tools. Also, some additional tools are required for advanced usage (Babel plugin, Babel Macros, TypeScript Plugin, Stylelint, etc.) and since it's compiled at runtime, it may hamper the performance of larger applications (some issues have been found when working with Next.js 13).

This is an example of a Styled Components code:

const Button = styled.a<{ $primary?: boolean; }>`
	background: transparent;
	border-radius: 3px;
	border: 1px solid var(--accent-color);
	color: var(--accent-color);
	display: inline-block;
	margin: 0.5rem 1rem;
	padding: 0.5rem 0;
	transition: all 200ms ease-in-out;
	width: 11rem;

	&:hover {
	filter: brightness(0.85);
	}

	${props => props.$primary && css`
	background: var(--accent-color);
	color: black;
	`}
`

As you can see, the tagged template literal allows the user to write CSS inside it and add conditional styling, props, and behavior.

2. Pico:

Pico is a lightweight, atomic CSS library that offers a minimal set of utility classes for styling, making it suitable for projects that prioritize simplicity and performance. This design set of CSS styles and layout options can be easily customized, allowing you to tailor styles to your project’s needs.

Its small file size makes it perfect for clean, simple, and lightweight web pages, meaning faster loading times and less network overhead. It has no dependencies, package manager, external files, or JavaScript, only a CSS file. It also includes a grid system that is used to build layouts with features like auto-columns, adaptive spacing and typography, responsiveness to different devices, and to improve alignment, reordering, and nesting. Also supports light and dark modes.

Pico can be installed manually (from a min.css file), from CDN or either NPM or Composer, allowing also the classless feature, meaning writing pure HTML will look styled. 

Here’s an example of how a Pico file looks:

<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.classless.min.css">
	<title>Hello, world!</title>
</head>

<body>
	<main>
		<h1>Hello, world!</h1>
	</main>
</body>

</html>

 

Having said that, however, Pico is not recommended for complex websites due to its limited number of features and components.

3. Other libraries:

Aside from Styled Components and Pico, here are some component libraries worth exploring:

• Chakra UI

This classless react component library is CSS-in-JS based, implementing the Emotion and Styled System. It lets you style through props, which simplifies the process by offering convenient shortcuts for styling components, ultimately saving time.

Chakra provides responsive layouts and enhances the development workflow through seamless TypeScript integration, ensuring type safety. It also features easy customization, which makes it easy to read and learn, which leads to saving time and effort. Additionally, it focuses on accessibility (all components have alt and aria labels for images and keyboard navigation). Also, all its components are compatible with dark mode and Figma (this last one using the Figma plugin that Chakra UI offers for turning designs into code).

Nevertheless, styling certain components (like switches or checkboxes) can be unachievable, and applying default ones may prove to be challenging as well.

Here’s an example of how Chakra UI works and its customization:

import { Button, Stack } from "@chakra-ui/react";

function Example() {
	return (
	<Stack spacing={4} direction="row" align="center">
		<Button colorScheme="teal" size="xs">
		Button
		</Button>
		<Button colorScheme="teal" size="sm">
		Button
		</Button>
		<Button colorScheme="teal" size="md">
		Button
		</Button>
		<Button colorScheme="teal" size="lg">
		Button
		</Button>
	</Stack>
	);
}

• Mantine UI

This is a free and open-source TypeScript-friendly library, which is also compatible with React and Next js along other most used modern environments (such as Gatsby.js, Redwood, Vite and Remix) or even without a framework, each with a different starting guide and documentation. It has over 120 components and also offers a hooks library with over 40 different custom hooks. Additionally it's dark mode compatible, it’s easy-to-use and to customize, and is responsive and adaptable.

However, keep in mind that all its components are built with CSS, and since it has limited community support, some complex customization may be not convenient. Also, it’s not comprehensive for all UI elements and has some dependency management complexities.

Here’s an example of Mantine UI component code:

import { Button, rem, Tooltip } from "@mantine/core";
import { useClipboard } from "@mantine/hooks";
import { IconCopy, IconCheck } from "@tabler/icons-react";
	
export function ButtonCopy() {
	const clipboard = useClipboard();
	return (
		<Tooltip
		label="Link copied!"
		offset={5}
		position="bottom"
		radius="xl"
		transitionProps={{ duration: 100, transition: "slide-down" }}
		opened={clipboard.copied}
		>
			<Button
			variant="light"
			radius="xl"
			size="md"
			styles={{
				root: { paddingRight: rem(14), height: rem(48) },
				section: { marginLeft: rem(22) },
			}}
			onClick={() => clipboard.copy("https://www.youtube.com/watch?v=dQw4w9WgXcQ")}>
				Copy link to clipboard
			</Button>
		</Tooltip>
	);
}

• Material UI

Material UI is a popular React-based UI framework created by Google. It offers a wide range of pre-designed components, styles, and layout options, also allowing you to import components and add props for variations. For years, it used to be the very first choice for a component library due to its simplicity, wide range of components and a very unified design system (using Google design guidelines), providing a consistent user experience across various platforms and devices.

Nevertheless, as time went by, other open source options appeared, and Material UI was left behind, mostly because of the difficulty of customization (especially regarding complex components), making it a time-consuming and challenging process. Thus, it limits the user to sticking to Google-like styles and branding guidelines.

Even though its file size is relatively small, its packaging size is not. Also, the library code is not easy to understand, and it has excessive DOM nodes at render, which may slow down the web application process and may result in performance issues.

Here is an example of what Material UI looks like:

import Button from "@mui/material/Button";

export default function ButtonUsage() {
	return <Button variant="contained">Hello world</Button>;
}

• React Bootstrap

Now on its version 2, React Bootstrap is one of the oldest React libraries, but it has evolved and removed old dependencies, such as jQuery or Bootstrap.js, and is compatible with Next js’s Server-Side Rendering. It's accessible and responsive by default and easy to learn; therefore, it's primarily used for quick prototyping. React Bootstrap works with classic themes and pre-built JavaScript elements hidden behind React, saving development time. It also offers a shorter syntax for implementing components.

Nevertheless, it lacks extensive customization options for complex components (some may be even more complicated than usual), and it's probably now considered somewhat outdated compared to the extensive options we have today.

Here’s a portion of React Bootstrap code:

import Button from 'react-bootstrap/Button';
function TypesExample() {
 return (
   <>
	<Button variant="primary">Primary</Button>{' '}
	<Button variant="secondary">Secondary</Button>{' '}
	<Button variant="success">Success</Button>{' '}
   </>
);
}

• Ant Design

Ant Design is the world’s second-most popular React UI library. It originated in China, is open source, and is primarily used for building web applications. It works similarly to Bootstrap and Material UI for code syntax and customization through props and is written in typescript with predictable static types.

It is widely known for its wide range of components and layouts, its Figma file availability, and its compatibility with the latest environments, such as Vue and Next js. Also, it has a visually appealing aesthetic, making it a favorite between businesses and developers. With a strong focus on user-friendliness, it lets you customize and test components for webs with its various landing page tools.

Unfortunately, since most of its community is of Chinese origin, it is limited regarding English and Spanish documentation and support, and some users have declared some difficulties with accessibility and poor SSR support. Besides, the installed files are large and take up a lot of storage space, and customizing non-Ant Design components is a problematic chore.

Here is an Ant Design component example:

import React from "react";
import { Button, Space } from "antd";
	
const App: React.FC = () => (
	<Space wrap>
	<Button type="primary">Primary Button</Button>
	<Button>Default Button</Button>
	<Button type="dashed">Dashed Button</Button>
	<Button type="text">Text Button</Button>
	<Button type="link">Link Button</Button>
	</Space>
);

export default App;

 

Conclusion

While Tailwind CSS offers a powerful and efficient styling solution for Next.js applications, it may not align with every project's needs. Consider the disadvantages of Tailwind CSS and explore other styling alternatives such as Styled Components, Pico, or other libraries that provide different approaches to styling while remaining compatible with Next.js, React, and TypeScript. Your choice of styling library should be based on your project's specific requirements, design goals, and development preferences.

To explore more web development tips, tricks, and the latest recommendations, visit our blog. Stay up-to-date with the latest trends in the world of web design!