feat: add tailwind preset for nuxt (#591)

* feat: add tailwind preset for nuxt

* feat: add tailwind preset for next

* feat: add default css variables to preset

* chore: cleanup nuxt tailwind config

* fix: switch nuxt to use packaged example styles

* feat: update previews with tailwind preset

* chore: update tailwind preset package

* chore: update turbo.json for tailwind config

* chore: tailwind preview turbo + tests

apps/preview/next/cypress/support/component.ts

@@ -15,9 +15,9 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands';
-import '../../styles/global.scss';
+import '../../styles/global.css';
 import '@percy/cypress';
-import "@cypress/code-coverage/support";
+import '@cypress/code-coverage/support';
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

apps/preview/next/layouts/Examples.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { createElement, ReactElement, useState } from 'react';
+import { ReactElement, useState, createElement } from 'react';
 import useSWR from 'swr';
 import { VsfButton, VsfButtonVariant, VsfButtonSize } from '@storefront-ui/react/components/VsfButton';
 import { VsfListItemMenu } from '@storefront-ui/react/components/VsfListItemMenu';

apps/preview/next/pages/_app.tsx

@@ -1,7 +1,7 @@
 import { AppProps } from 'next/app';
 import { ReactElement, ReactNode } from 'react';
 import { NextPage } from 'next';
-import '~/styles/global.scss';
+import '~/styles/global.css';
 import '@storefront-ui/example-style';
 
 export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {

apps/preview/next/styles/global.css

@@ -0,0 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@300;400;500;700&family=Red+Hat+Text:ital,wght@0,400;0,500;0,700;1,300&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/preview/next/tailwind.config.js

@@ -1,11 +1,16 @@
 const vsfTypography = require('@storefront-ui/typography');
 /** @type {import('tailwindcss').Config} */
-const config = require('@storefront-ui/tailwind-config/index.json');
+const { tailwindConfig } = require('@storefront-ui/tailwind-config');
+
 module.exports = {
-  ...config,
-  content: [
-    ...config.content,
-    '../../../node_modules/@storefront-ui/react/**/*.{ts,tsx}',
-  ],
-  plugins: [vsfTypography]
+  presets: [tailwindConfig],
+  content: ['./**/*.ts', './**/*.tsx', '../../../node_modules/@storefront-ui/react/**/*.tsx'],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: 'Red Hat Text, sans-serif',
+      },
+    },
+  },
+  plugins: [vsfTypography],
 };

apps/preview/nuxt/assets/css/tailwind.css

@@ -0,0 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@300;400;500;700&family=Red+Hat+Text:ital,wght@0,400;0,500;0,700;1,300&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/preview/nuxt/components/utils/ComponentExample.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="e-page">
+  <div class="flex-1">
     <div class="e-page-component" :class="componentContainerClassName">
       <slot />
     </div>

apps/preview/nuxt/nuxt.config.ts

@@ -1,5 +1,4 @@
 import { defineNuxtConfig } from 'nuxt/config';
-import tailwindConfig from './tailwind.config';
 
 export default defineNuxtConfig({
   app: {
@@ -11,12 +10,8 @@ export default defineNuxtConfig({
       title: 'Vue Storefront UI v2',
     },
   },
-  tailwindcss: {
-    config: tailwindConfig,
-    cssPath: '~/assets/global.scss',
-  },
   modules: ['@nuxtjs/tailwindcss'],
-  css: ['@storefront-ui/example-style/index.scss'],
+  css: ['@storefront-ui/example-style/index.scss', '@storefront-ui/example-style/controls.scss'],
   imports: {
     transform: {
       // you could also add the path of your built library to prevent this happening

apps/preview/nuxt/pages/examples.vue

@@ -17,15 +17,9 @@
           <VsfIconChevronRight v-else />
         </template>
       </VsfButton>
-      <ul class="sidebar-list">
-        <li>
-          <NuxtLink
-            v-for="component in components"
-            :key="component"
-            v-slot="{ navigate }"
-            :to="`/examples/${component}`"
-            custom
-          >
+      <ul class="sidebar-list flex flex-col">
+        <li v-for="component in components" :key="component">
+          <NuxtLink v-slot="{ navigate }" :to="`/examples/${component}`" custom>
             <VsfListItemMenu
               tag="span"
               :active="currentRoute.path === `/examples/${component}`"

apps/preview/nuxt/tailwind.config.ts

@@ -1,13 +1,16 @@
 import type { Config } from 'tailwindcss';
 import vsfTypography from '@storefront-ui/typography';
-import config from '@storefront-ui/tailwind-config/index.json';
+import { tailwindConfig } from '@storefront-ui/tailwind-config';
 
 export default <Config>{
-  ...(config as unknown as Config),
-  content: [
-    ...config.content,
-    '../../../node_modules/@storefront-ui/vue/shared/**/*.ts',
-    '../../../node_modules/@storefront-ui/vue/components/**/*.{ts,vue}',
-  ],
+  presets: [tailwindConfig],
+  content: ['./**/*.vue', './**/*.ts', './**/*.tsx', '../../../node_modules/@storefront-ui/vue/**/*.vue'],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: 'Red Hat Text, sans-serif',
+      },
+    },
+  },
   plugins: [vsfTypography],
 };

apps/preview/vue/cypress/support/component.ts

@@ -15,7 +15,7 @@
 
 // Import commands.js using ES2015 syntax:
 import "./commands";
-import "../../src/assets/global.scss";
+import "../../src/assets/main.css";
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
 

apps/preview/vue/src/assets/global.css

@@ -0,0 +1,4 @@
+@import url("https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@300;400;500;700&family=Red+Hat+Text:ital,wght@0,400;0,500;0,700;1,300&display=swap");
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/preview/vue/src/main.ts

@@ -1,14 +1,15 @@
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
+import { createApp } from "vue";
+import { createPinia } from "pinia";
 
-import App from './App.vue'
-import router from './router'
+import App from "./App.vue";
+import router from "./router";
 
-import './assets/main.css'
+import "./assets/main.css";
+import "./assets/global.css";
 
-const app = createApp(App)
+const app = createApp(App);
 
-app.use(createPinia())
-app.use(router)
+app.use(createPinia());
+app.use(router);
 
-app.mount('#app')
+app.mount("#app");

apps/preview/vue/tailwind.config.js

@@ -1,10 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 
-const config = require("@storefront-ui/tailwind-config/index.json");
+const { tailwindConfig } = require("@storefront-ui/tailwind-config");
 module.exports = {
-  ...config,
+  presets: [tailwindConfig],
   content: [
-    ...config.content,
     "../../../node_modules/@storefront-ui/vue/shared/**/*.ts",
     "../../../node_modules/@storefront-ui/vue/components/**/*.{ts,vue}",
   ],