DEV Community

Junichi Takahashi
Junichi Takahashi

Posted on • Updated on

How to set up Next.js + Tailwind

#nextjs #tailwindcss

Tailwind is a utility-first CSS framework.
This article describes how to set up Next.js + Tailwind.

Install 

npm i --save-dev tailwindcss
npm i --save-dev postcss
npm i --save-dev autoprefixer
Enter fullscreen mode Exit fullscreen mode

Init 

npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

Setting 

// tailwind.config.js

module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};
Enter fullscreen mode Exit fullscreen mode

Write 

/* src/styles/globals.css */

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Using Tailwind in Page 

// src/pages/example.tsx

const Page = (): JSX.Element => {
  return (
    <p data-testid="text" className="underline">
      Hello
    </p>
  );
};

export default Page;
Enter fullscreen mode Exit fullscreen mode

Check 

npm run dev
Enter fullscreen mode Exit fullscreen mode

http://localhost:3000/example

Support for Visual Studio Code 

// .vscode/extensions.json

{
  "recommendations": ["bradlc.vscode-tailwindcss"]
}
Enter fullscreen mode Exit fullscreen mode

Support for ESLint 

npm i --save-dev eslint-plugin-tailwindcss
Enter fullscreen mode Exit fullscreen mode 
// .eslintrc.json

{
  "extends": [
    // ...
    "plugin:tailwindcss/recommended"
  ],
  // ...
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

arjuncodess profile image

Next.js: The Future Of React?

Arjun Vijay Prakash -

mikevarenek profile image

Next.js Data Fetching: getStaticProps vs getServerSideProps

Mike Varenek -

devzakir profile image

I built a SaaS using Laravel, Livewire & Tailwind CSS

Zakir Hossen -

bsorrentino profile image

How to stream data over HTTP using NextJS

bsorrentino -