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,32 @@ This library contains:
 
 ## Installation
 
-You can add this library via npm:
-
-```sh
-npm install @nethesis/vue-components
+1. Install TailwindCSS 4 on your project, follow [the official documentation](https://tailwindcss.com/docs/installation)
+   on how to do so.
+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
+   /* import the Theme and the CSS for the components */
+   @import '@nethesis/vue-components/theme.css';
+   /* detect tailwind classes used in @nethesis/vue-components (change this path accordingly if needed) */
+   @source 'node_modules/@nethesis/vue-components';
+   ```
+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.
+
+## Fontawesome
+
+Due to fontawesome having issues overriding your icons, it's suggested to set to false the `autoAddCss` option from the
+icons, and adding the required CSS by yourself in a lower priority layer than tailwindcss.
+
+```css
+/* fontawesome styles */
+@import '@fortawesome/fontawesome-svg-core/styles.css' layer(fontawesome);
 ```
 
-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';
-    ```
-
-2. Import the default preset for tailwind, this can be done editing the `tailwind.config.js/ts` with the following lines:
-
-    ```js
-    export default {
-      // ...
-      presets: [require('@nethesis/vue-components/tailwind.config.ts')],
-      content: [
-        // ...
-        './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.
+Official documentation can be found here: https://docs.fontawesome.com/apis/javascript/configuration
 
 ## Contributing