tailwindcssでdivに枠線が反映されない

実現したいこと

tailwindcssでdivに枠線を引きたいです
イメージとしては以下の画像になります

該当のソースコード

App.vue

vue
1
2<template>
3
4
5  <v-card elevation="2">
6
7    <v-col cols="12" class="d-flex align-center border-blue-500" v-for="(item, index) in list.data.data.slice(0, 19)">
8  
9      <div class="flex flex-col items-center w-full md:w-1/2 lg:w-1/3 px-4 py-6 bg-gray-600 rounded-lg shadow-lg border-blue-500">
10        <h2 class="text-2xl font-bold text-gray-800">{{ item.title }}</h2>
11        <p class="text-gray-600">{{ item.tag }}</p>
12        <p class="text-gray-600">回答数: {{ item.answer_count }}</p>
13        <p class="text-gray-600">解決済み: {{ item.is_soved }}</p>
14        <p class="text-gray-600">投稿者: {{ item.user_name }}</p>
15        <p class="text-gray-600">閲覧数: {{ item.view_counst }}</p>
16      </div>
17
18     
19
20    </v-col>
21   
22  </v-card>
23
24  <div>
25    <v-pagination v-model="page" :length=10></v-pagination>
26  </div>
27</template>
28
29
30
31
32<script>
33
34
35import { ref } from 'vue'
36import { useRoute, onBeforeRouteUpdate } from 'vue-router'
37import axios from 'axios'
38
39
40export default {
41  name: 'Articles',
42  setup() {
43    const route = useRoute();
44    const perpage = 10;
45    let page = ref(0);
46    let offset = 5;
47    let list = ref([]);
48
49
50    if (null != route && route.query) {
51      page.value = (route.query.page) ? parseInt(route.query.page) : 1;
52    } else {
53      page.value = 1;
54    }
55
56    const setOffset = () => {
57
58     
59      offset = (page.value > 0) ? (page.value - 1) * perpage : 0;
60
61    }
62
63
64    setOffset()
65
66    onBeforeRouteUpdate(async (to, from) => {
67      if (to.query.page !== from.query.page) {
68        page.value = to.query.page;
69        setOffset()
70      }
71    })
72
73    return {
74      perpage,
75      page,
76      list
77    }
78
79
80  },
81  watch: {
82    page: function (newValue, oldValue) {
83      // 現在のページ番号が変化した時に実行される処理
84
85      axios.post('/api/pagination', {
86        newValue: newValue
87      })
88        .then(res => {
89        
90          this.list = res;
91        
92        })
93        .catch(error => {
94          console.log(error);
95        });
96
97    }
98  }
99
100}
101
102
103</script>
104

app.css

css
1
2@tailwind base;
3@tailwind components;
4@tailwind utilities;
5
6
7.border-blue-500 {
8    @apply border-blue-500;
9  }
10

tailwind.config.js

javaScript
1
2/** @type {import('tailwindcss').Config} */
3module.exports = {
4  theme: {
5    extend: {
6      borderColor: {
7        'blue-500': '#007bff',
8      },
9    },
10  },
11  variants: {},
12  plugins: [],
13};
14

vite.config.js

javaScript
1
2import { defineConfig } from "vite";
3import laravel from "laravel-vite-plugin";
4import vue from "@vitejs/plugin-vue";
5import vuetify from "vite-plugin-vuetify"
6import tailwindcss from 'tailwindcss'
7
8export default defineConfig({
9    plugins: [
10        vue(),
11        vuetify(),	
12        laravel({
13            input: ["resources/js/app.js","resources/css/app.css"
14        ],
15            refresh: true,
16        }),
17    ],
18    css: {
19        preprocessors: {
20          '**/*.css': [tailwindcss]
21        }
22    }
23});
24
25