DEV Community: Nikit Singh

15+ TailwindCSS Component Libraries that will make your life a bit easier

Nikit Singh — Sat, 20 Mar 2021 15:13:42 +0000

TailwindCSS is getting more and more popular nowadays. It has made writing CSS easier for a lot of us. And what has made it even easier you ask?

It's them tailwind component libraries. There are many amazing TailwindCSS component libraries out there now, and a lot of free ones too.

Here is a list of some of the TailwindCSS component libraries that I found after googling a bit. Hope this is useful for some of you :)

16. Tailwind UI Kit

This concludes the list. If you know of other TailwindCSS component libraries, do mention them in the comments and I will update this list.

Conclusion

This concludes our list. In case you want an even easier solution, you can try out Tails TailwindCSS Page Creator. It's a drag and drop builder for TailwindCSS that's pretty easy to use and very beginner-friendly. Its collection of predefined components is great too btw.

You can check out my blog @ NikitSingh and also subscribe to my newsletter to get this kind of content every week. ^_^

Setting up Chakra UI in a Next.js Project

Nikit Singh — Fri, 19 Mar 2021 22:17:13 +0000

If you ask me which React Component Library I love the most, then my answer won't be something super popular like Material UI, AntD, or ReactStrap. Instead, you will hear Chakra UI coming out of my mouth.

What is Chakra UI?

This is what the homepage of Chakra UI describes itself as:

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

Chakra UI is a latecomer to this ecosystem of React component libraries, but you will be missing out on a lot if you under-estimate how good it can be.

Why do I like Chakra UI?

Some of my favorite features about Chakra UI are :

All the components are accessible. No more looking for how you can make your button more accessible now.
TailwindCSS has inspired the color palette chosen for Chakra UI's default theme, and we all know how good those color choices are.
The default component looks gorgeous, and I rarely have to change anything before using them.
Adding dark mode support is as easy as breathing.

When it comes to React, my go-to way to bootstrap a new project is to use Next.js instead of Create-React-App. The reason behind this choice is worthy of a blog post in itself. I will write one later probably.

So let's do some coding now.

Bootsraping Next.js

To bootstrap a new Next.js project, run the following command.

npx create-next-app next-chakra-ui-sample

yarn create-next app next-chakra-ui-sample

Enter the created project folder using

cd next-chakra-ui-sample

Installing Chakra UI packages

Now install a couple of required dependencies.

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

Configuring Chakra UI in the app

After installing all the dependencies, we have to wrap the root component inside the ChakraProvider component. This is so that we can access Chakra UI components in our other components later on. To do this we will wrap the root <Component {...pageProps} /> component inside _app.js file with ChakraProvider.

// pages/_app.js
import { ChakraProvider } from '@chakra-ui/react'

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider theme={theme}>
      <Component {...pageProps} />
    </ChakraProvider>
  );
}

export default MyApp

Custom theme

In case you don't like the default theme colors or any other default styles, you can override or extend them. For doing that, create a theme.js file in the styles folder and add the following code to it:

// styles/theme.js
import { extendTheme } from '@chakra-ui/react'

const theme = extendTheme({
  colors: {
    overcompiled: {
      100: "#123FFF"
    },
  },
})

export default theme

Import the theme and pass it as a prop to the ChakraProvider Component.

// pages/_app.js
import { ChakraProvider } from '@chakra-ui/react'
import theme from '../styles/theme'

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider theme={theme}>
      <Component {...pageProps} />
    </ChakraProvider>
  );
}

export default MyApp

Now you can use the color as overcompiled.100 in your components. And with this, you are good to go with using Chakra UI in your project.

Thanks for reading this and ciao :)

Change default Next.js app Port

Nikit Singh — Tue, 02 Feb 2021 05:05:23 +0000

Wanting to change the default port for your Next.js app is a very common problem. If any other app or process is running on port 3000, you will get this error in your terminal

Port 3000 is already in use.
error Command failed with exit code 1.

Solution

There are 2 ways to go about solving this.

First is to give it a temporary port number. This is useful when you want to run your Next.js app on another port for a single time.

npm run dev -p 3040

yarn dev -p 3040

This will run your app on port 3040 for this particular session. Once you close the process you will have to write this again if you want it on port 3040.

The Second method is to set it inside your package.json's script section.

"scripts": {
    "dev": "next -p 3040", // This will change it for dev environment
    "build": "next build",
    "start": "next start -p 3040" // This will change it for the production
}

Now just run

npm run dev

yarn dev

Happy to be of help. :)

Adding TailwindCSS v2 in your Next.js project

Nikit Singh — Sat, 21 Nov 2020 11:37:22 +0000

TailwindCSS v2 was recently released. Their release trailer was freaking amazing. They even got music composed especially for their trailer.

Now let's focus on how you can add TailwindCSS v2 to your new or existing Next.js project.

Creating a new Next.js project

npx create-next-app

This command will bootstrap a new Next.js project for you.
The package.json should contain these scripts.

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

You can start the project by running

npm run dev

Adding TailwindCSS

npm install tailwindcss postcss autoprefixer

PostCSS v8 or up is required for Tailwind v2 to work. autoprefixer is a PostCSS plugin. It adds vendor-specific prefixes to the compiled CSS like -webkit, -ms, etc.

Configuring PostCSS

Both tailwindcss and autoprefixer are postcss plugins. To use them in our project, we first need to configure postcss and pass these two plugins to it.

Create a file named postcss.config.js in the root of your project.

touch postcss.config.js

Now add this to the file.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Adding TailwindCSS styles

Now create a src/styles/tailwind.css file and add the following to it.

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

The @tailwind directive will inject the base, components, and utility classes for us to use.

Now we have added TailwindCSS to our project. The only thing remaining is importing the styles globally. Doing so will let us use them from anywhere in our project.
To do that let import the tailwind.css file into the pages/_app.js file.

import '../src/styles/tailwind.css';

function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default App;

Restart your server after making changes to pages/_app.js so the changes can reflect.

Now you are ready to use Tailwind v2 in your project. Let's try it now, shall we?

Remove everything from your pages/index.js file and paste this there.

export default function Home() {
  return (
    <h1 className="text-4xl text-red-400 bg-gray-800 p-4 text-center">
      TailwindCSS v2 with Next.js
    </h1>
  );
}

Configuring TailwindCSS defaults

To change the TailwindCSS defaults we first need to create a tailwind config file. Add it by running this command.

npx tailwindcss init

This will create tailwind.config.js in the root of your project with following content,

module.exports = {
  purge: [],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Thanks for reading and I hope this was helpful :)

DEV Community: Nikit Singh

15+ TailwindCSS Component Libraries that will make your life a bit easier

0. Tailwind UI

1. Kitwind

2. Tail-Kit

3. Windmill UI

4. TailBlocks

5. Tailwindow

6. MerakiUI

7. Lofi UI

8. DaisyUI

9. Tailwind Templates

10. Tailwind Toolbox

11. Tailwind Components

12. Tailwind Starter Kit

13. Treact

14. Themes.dev Library

15. Wicked Blocks