Learn How to Use Tailwind CSS with Next.js

Tailwind CSS is a framework that helps you in developing front ends at speed. You can develop visually pleasing websites and applications without having to code a single line of CSS! It’s fantastic for getting ideas off the ground fast and perfect for prototypes (and large scale implementations) (and full-scale applications). In this article, we will teach you how to set up Tailwind CSS in your Next.Js App.

Install Next.Js

To set up your Next.js all you need to do is execute the following line in your  terminal:

npx create-next-app tailwind-demo-app
cd tailwind-demo-app

Install Tailwind

To run tailwind you need 3 packages, tailwind, Post.CSS and autoprefixer.

#npm
npm install -D [email protected] [email protected] [email protected]

#yarn
yarn add -D [email protected] [email protected] [email protected]

Setup the Config files

We need to put up two config files, one is for tailwind and one for postcss. The simplest method to accomplish this is to run:

npx tailwindcss init -p

Remove Unused CSS

Update tailwind.config.js with the following:

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
     extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: []
}

Add Tailwind CSS to your App

All you’ll have to do is include tailwind in the application. Simply edit /pages/ app.js with the following:

import 'tailwindcss/tailwind.css'

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

export default MyApp

Now Start building your awesome app.


Author Images
Syed
From Islamabad

A software developer with a keen interest in writing about technology, finance, and entrepreneurship. I've written for businesses in a variety of fields, including new technology, healthcare, programming, consumer applications, corporate computing, UI/UX, outsourcing, and education.

Post a comment

Your email address will not be published. Required fields are marked *

    Press x to close