bump tailwind; add tailwind to demos

demos/package.json

@@ -26,14 +26,15 @@
     "@types/uuid": "^8.3.4",
     "@vitejs/plugin-react": "^1.3.1",
     "@vitejs/plugin-vue": "^1.10.2",
-    "autoprefixer": "^10.4.2",
+    "autoprefixer": "^10.4.14",
     "iframe-resizer": "^4.3.2",
     "postcss": "^8.4.6",
+    "postcss-import": "^15.1.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "sass": "^1.49.7",
     "svelte": "^3.49.0",
-    "tailwindcss": "^2.2.19",
+    "tailwindcss": "^3.3.2",
     "typescript": "4.7.4",
     "uuid": "^8.3.2",
     "vite": "^2.9.13",

demos/postcss.config.js

@@ -1,5 +1,7 @@
 module.exports = {
   plugins: {
+    'postcss-import': {},
+    'tailwindcss/nesting': {},
     tailwindcss: {},
     autoprefixer: {},
   },

demos/src/Posts/1-1-textarea/Vue/Note.vue

@@ -15,5 +15,5 @@ watch(props, () => modelValueProxy.value = props.note?.content, {
 </script>
 
 <template>
-  <textarea v-model="modelValueProxy"></textarea>
+  <textarea v-model="modelValueProxy" class="p-2 border border-black rounded-lg"></textarea>
 </template>

demos/src/Posts/1-1-textarea/Vue/index.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import './styles.css'
 
 import Note from './Note.vue'
 import { TNote } from './types'
@@ -11,7 +12,9 @@ const notes: TNote[] = [
 </script>
 
 <template>
+  <div class="p-3">
     <div v-for="note in notes" :key="note.id">
       <Note :note="note"/>
     </div>
+  </div>
 </template>

demos/src/Posts/1-1-textarea/Vue/styles.css

@@ -0,0 +1,3 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";

demos/tailwind.config.js

@@ -1,9 +1,9 @@
 const defaultTheme = require('tailwindcss/defaultTheme')
 
 module.exports = {
-  mode: 'jit',
-  purge: [
+  content: [
     './preview/**/*.{vue,js,ts,jsx,tsx}',
+    './src/**/*.{vue,js,ts,jsx,tsx}',
   ],
 
   theme: {