my-next-plugin

Plugin Next.js avec composants Tailwind CSS (sans dépendance Tailwind)

Installation

npm install my-next-plugin

Configuration Tailwind CSS

Ce plugin utilise des classes Tailwind CSS mais ne contient pas Tailwind comme dépendance. Vous devez configurer Tailwind dans votre application pour scanner les fichiers du plugin.

Option 1 : Configuration dans tailwind.config.ts (Recommandé)

Ajoutez le chemin du plugin dans votre tailwind.config.ts :

import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    // Vos fichiers existants
    './src/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    // Ajoutez cette ligne pour scanner le plugin
    './node_modules/my-next-plugin/dist/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {},
  },
};

export default config;

Option 2 : Configuration dans le CSS (Tailwind v4)

Si vous utilisez Tailwind CSS v4, vous pouvez aussi utiliser la directive @source dans votre fichier CSS :

@import "tailwindcss";

@source "./node_modules/my-next-plugin/dist";

Utilisation

import { MyComponent, AnotherComponent } from 'my-next-plugin';

export default function Page() {
  return (
    <div>
      <MyComponent />
      <AnotherComponent />
    </div>
  );
}

Développement

# Build
npm run build

# Watch mode
npm run watch:all

Structure

my-next-plugin/
├── src/
│   ├── components/
│   │   ├── MyComponent.tsx
│   │   └── AnotherComponent.tsx
│   └── index.tsx
├── dist/           # Fichiers compilés
└── package.json

Notes importantes

• Ce plugin ne compile pas de CSS Tailwind
• Les classes Tailwind utilisées dans les composants seront compilées par votre application
• Assurez-vous que Tailwind est configuré dans votre projet pour scanner node_modules/my-next-plugin/dist