next-tailwind-netlify

← Back

Next #

npx create-next-app --ts

Tailwind #

touch postcss.config.js
touch tailwind.config.js
npm i -S tailwindcss postcss autoprefixer

postcss.config.js:

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

tailwind.config.js:

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

Replace styles/globals.css:

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

## Netlify

touch netlify.toml
npm install --save @netlify/plugin-nextjs

netlify.toml:

[build]
  command = "npm run build"
  publish = "out"

[[plugins]]
  package = "@netlify/plugin-nextjs"

Ready to go! #

Resources: