perf: Add tailwind to editor and design system (#9032)

packages/@n8n/storybook/main.ts

@@ -8,6 +8,7 @@ export const sharedConfig: StorybookConfig = {
 		'@storybook/addon-essentials',
 		'@storybook/addon-interactions',
 		'@storybook/addon-links',
+		'@storybook/addon-themes',
 	],
 	staticDirs: ['../public'],
 	framework: {

packages/@n8n/storybook/package.json

@@ -10,6 +10,7 @@
     "@storybook/addon-essentials": "^8.0.0",
     "@storybook/addon-interactions": "^8.0.0",
     "@storybook/addon-links": "^8.0.0",
+    "@storybook/addon-themes": "^8.0.0",
     "@storybook/blocks": "^8.0.0",
     "@storybook/test": "^8.0.0",
     "@storybook/vue3": "^8.0.0",

packages/design-system/.storybook/preview.js

@@ -1,6 +1,8 @@
 import { setup } from '@storybook/vue3';
+import { withThemeByDataAttribute } from '@storybook/addon-themes';
 
 import './storybook.scss';
+import '../src/css/tailwind/index.css';
 
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { fas } from '@fortawesome/free-solid-svg-icons';
@@ -59,7 +61,25 @@ export const parameters = {
 	},
 	options: {
 		storySort: {
-			order: ['Docs', 'Styleguide', ['Colors Primitives', 'Colors Tokens', 'Font', 'Spacing', 'Border'], 'Atoms', 'Modules'],
+			order: [
+				'Docs',
+				'Styleguide',
+				['Colors Primitives', 'Colors Tokens', 'Font', 'Spacing', 'Border'],
+				'Atoms',
+				'Modules',
+			],
 		},
 	},
 };
+
+export const decorators = [
+	withThemeByDataAttribute({
+		themes: {
+			light: 'light',
+			dark: 'dark',
+		},
+		defaultTheme: 'light',
+		attributeName: 'data-theme',
+		parentSelector: 'body',
+	}),
+];

packages/design-system/package.json

@@ -41,11 +41,13 @@
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/test-utils": "^2.4.3",
     "@vue/tsconfig": "^0.5.1",
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.19",
     "core-js": "^3.31.0",
     "jsdom": "^23.0.1",
+    "postcss": "^8.4.38",
     "sass": "^1.64.1",
-    "sass-loader": "^13.3.2"
+    "sass-loader": "^13.3.2",
+    "tailwindcss": "^3.4.3"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.36",

packages/design-system/postcss.config.js

@@ -1,5 +1,6 @@
 module.exports = {
 	plugins: {
+		tailwindcss: {},
 		autoprefixer: {},
 	},
 };

packages/design-system/src/css/tailwind/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

packages/design-system/tailwind.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+	content: ['./src/**/*.{vue,js,ts}'],
+	darkMode: ['selector', '[data-theme="dark"]'],
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+};

packages/editor-ui/postcss.config.js

@@ -1,5 +1,6 @@
 module.exports = {
 	plugins: {
+		tailwindcss: {},
 		autoprefixer: {},
 	},
 };

packages/editor-ui/src/main.ts

@@ -3,6 +3,7 @@ import { createApp } from 'vue';
 import 'vue-json-pretty/lib/styles.css';
 import '@jsplumb/browser-ui/css/jsplumbtoolkit.css';
 import 'n8n-design-system/css/index.scss';
+import 'n8n-design-system/css/tailwind/index.css';
 
 import './n8n-theme.scss';
 

packages/editor-ui/tailwind.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+	content: ['./index.html', './src/**/*.{vue,js,ts}'],
+	darkMode: ['selector', '[data-theme="dark"]'],
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+};