Install tailwind in next js using npm

Simple Algorithm

1: Run this command to install needed packages: yarn add tailwindcss postcss autoprefixer

2: Create a src folder at the root directory. Move the pages and styles folders into the src folder.

3: Create file called postcss.config.js at the root and paste this inside:

module.exports = {

plugins: {

tailwindcss: {},

autoprefixer: {},

},

}

4: Create file called tailwind.config.js at the root and paste this inside:

module.exports = {

content: ["./src/**/*.{html,js,ts,jsx,tsx}"],

theme: {

extend: {},

},

plugins: [],

}

5: Inside the _app.js file paste this: import 'tailwindcss/tailwind.css'

and…BAM, that’s it. 

https://www.youtube.com/watch?v=81320WHWgZo