Wendell the dog

Getting Started with Tailwind CSS and NextJS

Example using Prism / Markdown with Next.js including switching syntax highlighting themes.

10 mins

-

"2021-03-25T19:05:27.220Z"

  • 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

Some Example Blog Templates