Snapshot of tailwind config `npm ci` && `npm run build`

mytheme.libraries.yml

global-css:
  version: 2
  css:
    theme:
      dist/main.css: {}

global-js:
  js:
    dist/main.js: {}
  dependencies:
    - core/drupal

packages.json

{
  "name": "fstheme",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "foo": "bah",
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "watch": "vite build --watch"
  },
  "dependencies": {
    "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
    "@tailwindcss/forms": "^0.5.7",
    "@tailwindcss/typography": "^0.5.10",
    "swiper": "^10.0.4",
    "tailwindcss": "^3.3"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.25",
    "postcss-import": "^15.1.0",
    "vite": "^5.0.8"
  }
}

postcss.config.js

export default {
  plugins: {
    "postcss-import": {},
    tailwindcss: {},
    autoprefixer: {},
  },
};

tailwind.config.js

export const plugins = [require(
  '@tailwindcss/typography',
  '@tailwindcss/form',
)];
export const content = [
  'templates/**/*.twig',
  '../../../../config/sync/editor.editor.safe_html.yml',
  'src/css/ckeditor5.css',
  'src/ckeditor5_templates.json',
];
export const variants = {
  extend: {},
};
export const theme = {
  fontFamily: {
    'mono': ['Cutive Mono', 'Sans-Serif'],
    'sans': ['Open Sans', 'Sans-Serif'],
  },
  extend: {
    colors: {
      'fs-red': '#a71f23',
      'fs-red-tint': '#e5bcbd',
      'fs-dark-grey': '#333',
      'fs-light-grey': '#ddd',
      'background-opacity': 'rgb(var(#FFFFF / 0.9)',
    },
    boxShadow: {
      popped: '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
    },
    keyframes: {
      slideIn: {
        "0%": { opacity: 0, transform: "translateY(100%)" },
        "100%": { opacity: 1, transform: "translateY(0)" },
      },
    },
    animation: {
      slideIn: "slideIn 1s ease-in-out forwards var(--delay, 0)",
    },
    typography: (theme) => ({
      DEFAULT: {
        css: {
          a: {
            color: '#a71f23',
            textDecoration: `none`,
            '&:hover': {
              textDecoration: `underline`,
            },
          },
          pre: {
            'max-width': '90vw',
            'overflow-x': 'scroll',
          },
          code: {
            color: 'var(--tw-prose-code)',
            'color': '#a71f23',
            'background-color': '#eee',
            'padding': '.2em',
            fontWeight: '600',
          },
          'code::before': {
            content: '',
          },
          'code::after': {
            content: '',
          },
        },
      },
    }),
  },
};

vite.config.js

import { resolve } from 'path';

export default {
  build: {
    manifest: true,
    emptyOutDir: true,
    rollupOptions: {
      input: [
        "/src/js/main.js",
      ],
      // Remove the [hash] since Drupal will take care of that.
      output: {
        entryFileNames: `[name].js`,
        chunkFileNames: `chunks/[name].[hash].js`,
        assetFileNames: `[name].[ext]`,
      },
    },
  },
  resolve: {
    alias: {
      $images: resolve('./images')
    }
  },
}