Styling

Follow these steps to keep consistent styling across our frontend projects.

Install the Components Bundle


npm install @phpcreation/frontend-components-react-nextjs-bundle@latest

Configure Tailwind

Import Tailwind Config

In your tailwind.config.ts, import the shared configuration:


const sharedConfig = require("@phpcreation/frontend-components-react-nextjs-bundle/tailwind.config.ts");

Extend Your Tailwind Config

Integrate the shared config and ensure the component bundle is included in the content array:


const config = {
  darkMode: ["class"],
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@phpcreation/frontend-components-react-nextjs-bundle/**/*.{ts,tsx}",
  ],
  ...sharedConfig,
} satisfies Config;
 
export default config;

If you have tailwind configs specific to a project, you can add them in the tailwind.config.ts file after the sharedConfig import.

Import Global Styles

In your global.css file (or wherever you import Tailwind styles), include the global css from the bundle:


@tailwind base;
@tailwind components;
@tailwind utilities;
 
@import "../../../node_modules/@phpcreation/frontend-components-react-nextjs-bundle/dist/styles/globals.css";

If you have global styles specific to a project, you can add them in the global.css file after the import statement.