TailwindCSS Autocomplete from ui

[Psycarlo]

Hi serkodev

I enjoyed your article very much.

A problem with TailwindCSS is that we don't get autocomplete: on packages/app/app.vue I don't get autocomplete for the 'bg-ui' class, for example.

*Using vsc and Tailwind CSS IntelliSense extension

[Psycarlo]

My solution was to create yet another package: tailwind-config

package.json

{
  "name": "@nuxt-monorepo/tailwind-config",
  "version": "0.0.0",
  "private": true,
  "devDependencies": {
    "tailwindcss": "^3.4.1"
  }
}

tailwind.config.ts

import { type Config } from 'tailwindcss'

export default <Partial<Config>>{
  theme: {
    extend: {
      colors: {
        brand: {
          primary: '#204B9A',
        }
      },
      fontFamily: {
        brand: ['Inter', 'sans-serif']
      }
    }
  },
  plugins: []
}

I then add this package to ui and app
Use the shared config:

tailwind.config.ts

import sharedConfig from "@nuxt-monorepo/tailwind-config/tailwind.config";
import { type Config } from "tailwindcss";

export default <Partial<Config>>{
  presets: [sharedConfig],
};