chore!: upgrade to tailwindcss 4

.storybook/main.ts

@@ -4,9 +4,8 @@ const config: StorybookConfig = {
   stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-    '@storybook/addon-themes'
+    '@storybook/addon-themes',
+    '@storybook/addon-docs'
   ],
   framework: {
     name: '@storybook/vue3-vite',

.storybook/preview-head.html

@@ -0,0 +1,7 @@
+<script>
+  FontAwesomeConfig = {
+    // this allows to style the icons since tailwindcss v4, due to fontawesome not providing any way to add a layer to
+    // the CSS generated by the library. This then needs to be imported manually in the main.css file in the components.
+    autoAddCss: false
+  }
+</script>

.storybook/preview.ts

@@ -1,6 +1,6 @@
-import type { Preview, VueRenderer } from '@storybook/vue3'
+import type { Preview, VueRenderer } from '@storybook/vue3-vite'
 import { withThemeByClassName } from '@storybook/addon-themes'
-import { fn } from '@storybook/test'
+import { fn } from 'storybook/test'
 
 import '../src/main.css'
 import './storybook.css'
@@ -25,7 +25,9 @@ const preview: Preview = {
     }),
     (story) => ({
       components: { story },
-      template: '<div class="bg-gray-50 p-10 dark:bg-gray-900"><story /></div>'
+      template: `<div class="bg-gray-50 text-sm p-10 text-gray-700 dark:bg-gray-900 dark:text-gray-100">
+        <story />
+      </div>`
     })
   ]
 }

.storybook/storybook.css

@@ -1,3 +1,5 @@
+@reference "../src/main.css";
+
 .sb-show-main.sb-main-padded {
   /* remove default padding from component area */
   padding: 0;

Containerfile

@@ -9,8 +9,6 @@ COPY package.json .
 COPY package-lock.json .
 RUN npm ci --ignore-scripts
 COPY src src
-COPY postcss.config.js .
-COPY tailwind.config.ts .
 COPY tsconfig.app.json .
 COPY tsconfig.json .
 COPY tsconfig.node.json .

README.md

@@ -6,38 +6,29 @@ This library contains:
 
 ## Installation
 
-You can add this library via npm:
-
+1. Install TailwindCSS 4 on your project.
+2. Add this library via npm:
 ```sh
 npm install @nethesis/vue-components
 ```
+3. Add to your main CSS file (change `node_modules` path if needed):
+```css
+@layer vendor, theme, base, components, utilities;
 
-After this, you'll need to import a few files to make everything work:
-
-1. You need to import the main CSS file, if you're using PostCSS (this is the default if you're using Vite + TailwindCSS) you can import it in your `main.css` file:
-
-    ```postcss
-    @import '@nethesis/vue-components/main.css';
-    ```
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/preflight.css' layer(base);
+@import 'tailwindcss/utilities.css';
 
-2. Import the default preset for tailwind, this can be done editing the `tailwind.config.js/ts` with the following lines:
+/* import styles from @nethesis/vue-components */
+@import '../../node_modules/@nethesis/vue-components/dist/main.css' layer(components);
 
-    ```js
-    export default {
-      // ...
-      presets: [require('@nethesis/vue-components/tailwind.config.ts')],
-      content: [
-        // ...
-        './node_modules/@nethesis/vue-components/dist/**/*.js',
-        // ...
-      ],
-      // ...
-    }
-    ```
+/* detect tailwind classes used in @nethesis/vue-components */
+@source '../../node_modules/@nethesis/vue-components/dist/**/*.js';
 
-You can still override the theme adding your customizations, more info can be found in the [Tailwind documentation](https://tailwindcss.com/docs/presets).
-
-After this, you're golden! You can browse the [Storybook](https://nethesis.github.io/vue-components) to see the available components and their usage.
+/* load tailwind forms plugin, needed for some components */
+@plugin '@tailwindcss/forms';
+```
+4. After this, you're golden! You can browse the [Storybook](https://nethesis.github.io/vue-components) to see the available components and their usage.
 
 ## Contributing