Установите TailwindCSS в Vue 3

  1. Сначала установите tailwind с его зависимостями с помощью следующей команды.
npm install -D tailwindcss postcss autoprefixer
Войдите в полноэкранный режим Выход из полноэкранного режима

2.Затем создайте файл конфигурации с помощью следующей команды

npx tailwindcss init -p
Войдите в полноэкранный режим Выход из полноэкранного режима

3.Затем выполните следующую конфигурацию tailwind в файле tailwind.config.js.
Изменить

content: [],
Войдите в полноэкранный режим Выход из полноэкранного режима

На

content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
Войдите в полноэкранный режим Выход из полноэкранного режима

4.Создайте файл src/assets/css/tailwind.css и заполните его следующим образом

@tailwind base;
@tailwind components;
@tailwind utilities;
Войдите в полноэкранный режим Выход из полноэкранного режима

5.Импортируйте tailwind.css в файл main.js со следующим кодом

import '@/assets/css/tailwind.css'; 
Войдите в полноэкранный режим Выход из полноэкранного режима

6.Откройте файл App.vue и измените все его содержимое на следующий код

<template>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</template>

<script>

export default {
  name: 'App',
}
</script>
Войдите в полноэкранный режим Выход из полноэкранного режима

7.Выполните следующую команду

npm run serve
Войдите в полноэкранный режим Выход из полноэкранного режима

8.Затем откройте его в браузере, результаты будут следующими

Оцените статью
devanswers.ru
Добавить комментарий