Setup

TailwindCSS Setup

Please setup TailwindCSS according to the Framework Guides according to the framework used.

Theme Setup

To set up the nexineer Theme, install the needed packages first:

npm install @nexineer/smart-factory-design-theme

Then adapt the config file tailwind.config.ts to use the right preset:

import { Config } from 'tailwindcss';


module.exports = {
  content: [
    './content/**/*.mdx',
    './src/**/*.{js,jsx,ts,tsx}',
  ],

  presets: [
    require('@nexineer/smart-factory-design-theme'),
  ],
} satisfies Config;

Make sure to adapt the content configuration to include all files using CSS classes.

CSS Setup

npm install -D postcss-import

Next, adapt your postcss.config.ts to include the plugin:

module.exports = {
  plugins: {
    'postcss-import': {},
    tailwindcss: {},
    autoprefixer: {},
  },
}

Load the styles by adapting your global CSS file to:

@import "tailwindcss/base";
@import "@nexineer/smart-factory-design-theme/lib/nexineer-base-styles.css";

@import "tailwindcss/components";
@import "@nexineer/smart-factory-design-theme/lib/nexineer-components.css";

@import "tailwindcss/utilities";
@import "@nexineer/smart-factory-design-theme/lib/nexineer-utilities.css";

Fonts

The theme uses two fonts:

• Quicksand
• Material Symbols

You can install them using npm packages:

npm install @fontsource-variable/material-symbols-outlined @fontsource-variable/quicksand

Afterward, make sure to include these fonts into your application.