Getting Started with Tailwind CSS and NextJS

Mar 26, 2021
  • Install Tailwind and it's dependencies
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
  • Initialize Tailwind Config
npx tailwindcss init -p

This will create tailwind.config.js and postcss.config.js

  • Configure tailwind to remove unused styles in production
// tailwind.config.js
  module.exports = {
   - purge: [],
   + purge: ['./pages/**/*.{js,ts,jsx,tsx}', './src/**/*.{js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }
  • Add tailwind to styles/global.css:
/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
  • Add a pages/_app.tsx if you don't have one already and include the global styles:
/* ./pages/_app.tsx */
import '../styles/global.css'

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

export default MyAp
  • Test it out

Some of my favorite Tailwind CSS Tutorials

  • https://www.digitalocean.com/community/tutorials/build-a-beautiful-landing-page-with-tailwind-css

Some Example Blog Templates

  • https://github.com/naxeem/raalhu-blog