Tailwind и Vue

← Tailwind

Репозитории для быстрой установки Tailwind + Vue

Vite + Vue 3 + Tailwind CSS (starter)

https://github.com/web2033/vite-vue3-tailwind-starter

Наш tailwind-vue-app

Репозиторий: https://gitlab.com/romychvk/tailwind-vue-app

Чистая установка минимального проекта Vue + Tailwind

Подготовьте систему — установите Vue CLI:

sudo npm install -g @vue/cli

Создайте стандартное минимальное приложение Vue:

vue create <your-project-name>

В конце будет предложено перейти в папку проекта и протестировать приложение.

Перейдите в папку проекта и обновите Vue и установите Tailwind CSS:

vue upgrade --next
npm install tailwindcss

Структура файлов проекта Vue + Tailwind

• public/index.html — сюда автоматически вставляется приложение
• src/main.js — основной JS, который вставляется в index.html. В нем же подключается основной CSS
• src/App.vue — приложение Vue
• src/components/ — здесь создаем файлы .vue компонентов приложения
• postcss.config.js — конфиг PostCSS, через который включается Tailwind
• tailwind.config.js — опциональный конфиг, который ищет Tailwind и который используется для его настройки
• src/assets/styles/index.css — основной CSS файл, в котором подключаются библиотеки Tailwind и можно добавлять свои стили

Настройка

Tailwind — это плагин PostCSS и подключается он через конфиг PostCSS.

Создайте конфигурационный файл:

touch postcss.config.js

и настройте в нем подключение Tailwind:

// postcss.config.js

const autoprefixer = require('autoprefixer');
const tailwindcss = require('tailwindcss');

module.exports = {
  plugins: [
    tailwindcss,
    autoprefixer,
  ],
};

Создайте основной файл CSS стилей Tailwind:

mkdir -p src/assets/styles/
touch src/assets/styles/index.css

и добавьте в него строки:

/* src/assets/styles/index.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

и подключите его к приложению в файле src/main.js:

// src/main.js
// ...
import App from './App.vue'

import './assets/styles/index.css';
// ...

Создание нового компонента

Например, создадим компонент Navbar, как описано в скринкасте Building a Navbar Layout with Flexbox

touch src/components/Navbar.vue

// src/components/Navbar.vue

<template>
  // сюда вставьте HTML шаблон: https://tailwindcss.com/components/navigation#responsive-header
</template>

<script>
export default {
  name: 'Navbar'
}
</script>

Подключите компонент — отредактируйте src/App.vue и добавьте Navbar в трех местах:

// src/App.vue

<template>
  <Navbar />  <!-- (1) -->
  <img alt="Vue logo" src="./assets/logo.png" class="mx-auto" />
  <HelloWorld msg="Welcome to Your Vue.js App" class="text-center" />
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import Navbar from './components/Navbar.vue' // (2)

export default {
  name: 'App',
  components: {
    HelloWorld,
    Navbar // (3)
  }
}
</script>

Теперь запустите сервер и убедитесь, что навбар появился:

npm run serve

См. также

• Using Tailwind CSS with Vue.js
• Setting Up Tailwind CSS in a Vue.js Project (в статье неправильный репозиторий в команде клонирования — правильный этот https://github.com/snipcart/vue-tailwind)
• Vue MQ (MediaQuery) — 📱 💻 Define your breakpoints and build responsive design semantically and declaratively in a mobile-first way with Vue.