Merge pull request #2 from DevShaded/add/tailwindcss

Add tailwind css

Author: DevShaded

package-lock.json

@@ -5,8 +5,11 @@
         "build": "vite build && vite build --ssr"
     },
     "devDependencies": {
+        "autoprefixer": "^10.4.13",
         "axios": "^1.1.2",
         "laravel-vite-plugin": "^0.7.2",
+        "postcss": "^8.4.21",
+        "tailwindcss": "^3.2.7",
         "vite": "^4.0.0"
     },
     "dependencies": {

package.json

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

postcss.config.js

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

resources/css/app.css

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 
-const msg = ref('Hello World');
+const msg = ref('Welcome to your Laravel Inertia Starter Template!');
 </script>
 
 <template>
-    <div>
-        <h1>{{ msg }}</h1>
-    </div>
+    <h1 class="text-3xl font-bold underline">
+        {{ msg }}
+    </h1>
 </template>

resources/js/Pages/Index.vue

@@ -1,5 +1,6 @@
 import { createApp, h } from 'vue'
 import { createInertiaApp } from '@inertiajs/vue3'
+import '../css/app.css'
 
 createInertiaApp({
     resolve: name => {

resources/js/app.ts

@@ -4,6 +4,10 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
+        <!-- Styles -->
+        @vite('resources/css/app.css')
+
+        <!-- Scripts -->
         @vite('resources/js/app.ts')
         @inertiaHead
     </head>

resources/views/app.blade.php

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: [
+        "./resources/**/*.blade.php",
+        "./resources/**/*.js",
+        "./resources/**/*.vue",
+    ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}