fix:finish half-assed tailwind install (replaces windicss)

packages/playground/package.json

@@ -14,6 +14,8 @@
   },
   "devDependencies": {
     "@vue/compiler-sfc": "^3.3.8",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.31",
     "tailwindcss": "^3.3.5",
     "vite": "^4.5.0"
   }

packages/playground/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+}

packages/playground/src/index.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;

packages/playground/src/main.ts

@@ -1,7 +1,6 @@
 import { createApp } from 'vue'
 import { install as MyLibPLugin } from '@linusborg/lib'
 import App from './App.vue'
-import 'virtual:windi.css'
 import './index.css'
 
 const app = createApp(App)

packages/playground/tailwind.config.ts → packages/playground/tailwind.config.js

@@ -1,5 +1,6 @@
+/** @type {import('tailwindcss').Config} */
 export default {
-	purge: ['./index.html', './src/**/*.vue', './src/**/*.ts'],
+	content: ['./index.html', './src/**/*.vue', './src/**/*.ts'],
 	darkMode: false, // or 'media' or 'class'
 	theme: {
 		extend: {},

packages/playground/vite.config.ts

@@ -1,9 +1,8 @@
 import vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'
-import WindiCSS from 'vite-plugin-windicss'
 process.env.NODE_ENV
 export default defineConfig({
-	plugins: [vue(), WindiCSS()],
+	plugins: [vue()],
 	resolve: {
 		alias: {
 			// we alias to the lib's source files in dev
@@ -19,7 +18,7 @@ export default defineConfig({
 		// we don't minify so we can look at the bundle ouput. Change if you wanna deploy the playground
 		minify: false,
 		rollupOptions: {
-			// Comment in to move vue out of the bundle - easier to look at it that way.
+			// Comment in to move vue out of the bundle - easier to look at the app's bundle content that way.
 			// external: ['vue'],
 		},
 	},