Logo

    Home

    Documentation

    Use Cases

    Training

    Applications

    Release Notes

    Tailwind CSS Support for Themes

    Tailwind CSS Support for Themes

    • 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

    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.

    Logo
    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);
}