Next TS + tailwindcss

Installer Next

npm install -g create-next-app

version Next

create-next-app --version

setup Next

npx create-next-app --exemple with-typescript app-name

install packages

npm install tailwindcss postcss-preset-env

config postcss

module.exports = {
	plugins: ['tailwindcss', 'postcss-preset-env']
};

Créer un fichier postcss.config.js à la base du projet

config tailwind

module.exports  = {
    purge: ['./pages/**/*.tsx', './styles/**/*.css'],
    future: {
        removeDeprecatedGapUtilities: true,
        purgeLayersByDefault: true
    },
}

Créer un fichier tailwind.config.js à la base du projet

import tailwindcss

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {}

Créer un fichier index.css dans un dossier styles

Import css dans app

import  '../styles/index.css'

const MyApp = ({ Component, pageProps }) => (
  <Component {...pageProps} />
)

export default MyApp;

Vous pouvez créer un fichier nommé _app.tsx dans le dossier page et y insérer ce code