• 1. Activate Tailwind CSS
• 1.1 TypeScript Themes Folder
• 1.2 SASS Themes Folder
• 2. Development Mode

1. Activate Tailwind CSS

Only two small changes are needed to activate Tailwind CSS. One change needs to be done inside the TypeScript themes folder <WebUI>/themes/<YourThemeName> and one inside the SASS themes folder <WebUI>/sass/themes/<YourThemeName>.

1.1 TypeScript Themes Folder

• Copy the tailwind folder from the reference theme (e.g. Air Theme).
• Modify theme.ts

import type { Theme, ThemePartial } from '@/types/theme.types';
import { colors } from './colors';
import { tailwind } from './tailwind/tailwind'; // <-- Add this
import ThemeCore from '@/themes/core/theme';

const theme: ThemePartial = {
  core: {
    name: 'playground-light',
    style: 'light'
  },
  colors,
  icons: { style: 'dark' },
  images: { logo: { name: 'buildone-icon-plain', ext: 'svg' } },
  tailwind // <-- Add this
};

export function generate(): Theme {
  return ThemeCore.extend(theme);
}

1.2 SASS Themes Folder

Inside <WebUI>/sass/themes/<YourThemeName>/_variables.scss add

// #### Tailwind CSS support
@import './tailwind';

Stop WebUI development server (if running) and run yarn run build-tailwind inside <WebUI> folder.

That’s it!

2. Development Mode

In development mode the command yarn run build-tailwind:watch should be used. This command adds a watcher, which observes all Tailwind CSS relevant changes matching <WebUI>/src/**/*.{vue,html,js,ts} pattern and rebuilds the tailwind.css file. The reason for that is, that Tailwind CSS uses Build.One variables for theming and only adds CSS classes to the bundle, which are used inside the code base.