Getting Started • Documentation • Need Help? • About • License

1. You want setup Tailwind CSS for Next JS.
2. This project will help you understand and how can setup TailwindCSS and SCSS for NextJS

Demo TailwindCSS NextJS is a small project for basic setup TailwindCSS for NextJS.

• Next JS
• Tailwind CSS

# install libs
yarn
# run dev
yarn dev
# generate
yarn export

.
├── 📁 assets
│   ├── 📁 styles
│   ├── ├── 📝 tailwind.css
│   │   └── 📝 globals.scss
│   └── 📁 images
├── 📁 components
│   ├── 📁 common
│   └── 📁 partials
├── 📁 layouts
│   ├── 📁 components
│   └── 📝 default.jsx
├── 📁 pages
│   ├── 📝 _app.jsx
│   ├── 📝 _document.jsx
│   ├── 📝 index.jsx
│   ├── 📝 demo.jsx
│   └── 📝 user.jsx
├── 📁 public
├── 📝 .env
├── 📝 .env.development
├── 📝 .env.production
├── 📝 jsconfig.js
├── 📝 next.config.js
├── 📝 postcss.config.js
├── 📝 tailwind.config.js
└── 📝 README.md

• Node.js
• yarn

• Install lib

yarn add -D sass tailwindcss postcss autoprefixer

1. Create file config postcss postcss.config.js

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

2. Create file config tailwind tailwind.config.js

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

3. Create file /assets/styles/tailwind.css

@tailwind base;
/* Write your own custom base styles here */

/* Start purging... */
@tailwind components;
/* Stop purging. */

/* Start purging... */
@tailwind utilities;
/* Stop purging. */

4. Create file style /assets/styles/globals.scss

5. Remove folder /styles

Any of testing activities and reports goes here.

You have a question or problem wasn't solved? No worries! Just open up a new issue in the GitHub issue tracker. Please provide all information to reproduce your problem. If you don't have a GitHub account, you can contact me directly.

• none (that are reported)

If you haven't done so already, please check out Get Help for the fastest possible help on your issue. Alternatively you can get in touch with me by:

• Email: [email protected]

This project is proudly licensed under the MIT license.