chore: add example for usage with tailwind

.github/workflows/ci-examples.yml

@@ -23,6 +23,10 @@ jobs:
  buildScript: example:starter:build
  storybookBuildScript: example:starter:storybook:publish
  projectToken: chpt_dc04103f8a32bfa
+ - package: Tailwind
+ buildScript: example:tailwind:build
+ storybookBuildScript: example:tailwind:storybook:publish
+ projectToken: chpt_fbfe47dc27d4064
  steps:
  - uses: actions/checkout@v4
  with:

examples/tailwind/.gitignore

@@ -0,0 +1,26 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example
+
+*storybook.log

examples/tailwind/.storybook/main.js

@@ -0,0 +1,20 @@
+/** @type { import('storybook-vue').StorybookConfig } */
+const config = {
+ stories: [
+ '../components/**/*.mdx',
+ '../components/**/*.stories.@(js|jsx|ts|tsx|mdx)',
+ ],
+ addons: [
+ '@storybook/addon-links',
+ '@storybook/addon-essentials',
+ '@chromatic-com/storybook',
+ ],
+ framework: {
+ name: '@storybook-vue/nuxt',
+ options: {},
+ },
+ docs: {
+ autodocs: 'tag',
+ },
+}
+export default config

examples/tailwind/.storybook/preview.js

@@ -0,0 +1,12 @@
+const preview = {
+ parameters: {
+ controls: {
+ matchers: {
+ color: /(background|color)$/i,
+ date: /Date$/i,
+ },
+ },
+ },
+}
+
+export default preview

examples/tailwind/README.md

@@ -0,0 +1,79 @@
+# Nuxt 3 Minimal Starter
+
+This example shows how to use the [Tailwind CSS module for Nuxt](https://tailwindcss.nuxtjs.org/) in combination with the Nuxt Storybook module.
+
+---
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

examples/tailwind/app.vue

@@ -0,0 +1,5 @@
+<template>
+ <div>
+ <NuxtWelcome />
+ </div>
+</template>

examples/tailwind/components/CSSStyling.stories.ts

@@ -0,0 +1,13 @@
+import CSSStyling from './CSSStyling.vue'
+
+const meta = {
+ title: 'Example/CSS Styling',
+ component: CSSStyling,
+ tags: ['autodocs'],
+}
+
+export default meta
+
+export const CSSStylingStory = {
+ args: {},
+}

examples/tailwind/components/CSSStyling.vue

@@ -0,0 +1,18 @@
+<template>
+ <div class="p-4">
+ <div class="px-6 py-4">
+ <span class="badge mr-2">#photography</span>
+ <span class="badge mr-2">#travel</span>
+ <span class="badge">#winter</span>
+ </div>
+ </div>
+</template>
+
+<style lang="postcss" scoped>
+.badge {
+ @apply inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700;
+ &:hover {
+ @apply bg-gray-300;
+ }
+}
+</style>

examples/tailwind/components/SimpleDiv.stories.ts

@@ -0,0 +1,13 @@
+import SimpleDiv from './SimpleDiv.vue'
+
+const meta = {
+ title: 'Example/Simple Div',
+ component: SimpleDiv,
+ tags: ['autodocs'],
+}
+
+export default meta
+
+export const SimpleDivStory = {
+ args: {},
+}

examples/tailwind/components/SimpleDiv.vue

@@ -0,0 +1,10 @@
+<template>
+ <div class="px-6 py-4 pb-2">
+ <div class="font-bold text-xl mb-2">The Coldest Sunset</div>
+ <p class="text-gray-700 text-base">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus
+ quia, nulla! Maiores et perferendis eaque, exercitationem praesentium
+ nihil.
+ </p>
+ </div>
+</template>

examples/tailwind/nuxt.config.ts

@@ -0,0 +1,5 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+ devtools: { enabled: true },
+ modules: ['@nuxtjs/storybook', '@nuxtjs/tailwindcss'],
+})

examples/tailwind/package.json

@@ -0,0 +1,27 @@
+{
+ "name": "tailwind",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "build": "nuxt build",
+ "dev": "nuxt dev",
+ "generate": "nuxt generate",
+ "preview": "nuxt preview",
+ "storybook": "storybook dev -p 6006",
+ "build-storybook": "storybook build"
+ },
+ "dependencies": {
+ "@nuxtjs/tailwindcss": "^6.12.0",
+ "nuxt": "^3.11.2",
+ "vue": "^3.4.21",
+ "vue-router": "^4.3.0"
+ },
+ "devDependencies": {
+ "@chromatic-com/storybook": "^1.3.3",
+ "@nuxtjs/storybook": "workspace:*",
+ "@storybook/addon-essentials": "^8.0.8",
+ "@storybook/addon-links": "^8.0.8",
+ "@storybook/blocks": "^8.0.8",
+ "@storybook/test": "^8.0.8"
+ }
+}

examples/tailwind/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+ "extends": "../.nuxt/tsconfig.server.json"
+}

examples/tailwind/tsconfig.json

@@ -0,0 +1,4 @@
+{
+ // https://nuxt.com/docs/guide/concepts/typescript
+ "extends": "./.nuxt/tsconfig.json"
+}

package.json

@@ -30,6 +30,9 @@
  "example:starter:build": "nuxi build examples/starter",
  "example:starter:storybook:build": "cd examples/starter && pnpm run build-storybook",
  "example:starter:storybook:publish": "chromatic --exit-zero-on-changes --build-script-name example:starter:storybook:build --project-token=chpt_dc04103f8a32bfa",
+ "example:tailwind:build": "nuxi build examples/tailwind",
+ "example:tailwind:storybook:build": "cd examples/tailwind && pnpm run build-storybook",
+ "example:tailwind:storybook:publish": "chromatic --exit-zero-on-changes --build-script-name example:tailwind:storybook:build --project-token=chpt_fbfe47dc27d4064",
  "build": "nuxt-module-build build",
  "lint": "pnpm lint:eslint && pnpm lint:prettier",
  "lint:eslint": "eslint --report-unused-disable-directives .",