Tailwindcss не работает для Vite + Vue3 + Primevue
Извините, если у меня возникнет повторяющийся вопрос. Я просмотрел вопросы, уже заданные на форуме, но так и не нашел решения, которое еще не пробовал.
Объяснение проблемы
Сейчас я работаю над тестовым проектом, чтобы лучше познакомиться с различными концепциями. В моем проекте используются Vue3, Vite, PrimeVue, Pinia, Supabase, (...) и Tailwindcss. Я добавил Tailwindcss последним и, основываясь на документации, добавил конфигурации в разные файлы конфигурации - классы внутри моих компонентов vue по-прежнему не работают (а в режиме разработки Tailwindcss на самом деле нет).
После нескольких часов поиска и безуспешных попыток различных подходов (найденных в stackOverflow, документации (...), включая пакет postcss-load-config), я подумал, что публикация здесь, возможно, поможет мне найти решение. Если кто-нибудь столкнулся с той же проблемой или имеет больше опыта в этом вопросе, я был бы очень рад.
Тест-Репо
Я выложил репозиторий тестового проекта в открытый доступ, потому что думал, что так будет проще: https://github.com/lyra-neska/pkmn-glossar
Пробованные варианты:
- импорт Tailwindcss с помощью @import, @layer или @tailwind
- добавление Tailwindcss в пакеты в vite.config, ts.config (...) напрямую
- добавление свойств из и в файл Tailwind.config.ts
- использование различных настроек препроцессора для настройки попутного ветра и postcss
- пытаюсь добавить параметры postcss-load-config и postcss.config.ts
Я уверен, что пробовал больше, но не все перечислил.
Ожидаемый результат
- исправить проблему с Tailwindcss для использования классов Tailwindcss в моих компонентах Vue
Ответы 1
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init
это создаст Tailwind.config.js В файле Tailwind.config.js настройте параметр очистки, указав пути ко всем вашим страницам и компонентам, чтобы Tailwind мог удалять неиспользуемые стили в производственных сборках: добавьте в него следующий код
module.exports = {
purge: [],
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Создайте файл postcss.config.js в корневом каталоге вашего проекта со следующим содержимым:
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
}
Создайте файл CSS (например, Styles.css) в папке src и включите следующее:
стили.css
/* src/styles.css */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
Наконец, убедитесь, что ваш файл CSS импортируется в файл ./src/main.js или index.js:
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')
перезапустить сервер разработки
Кажется, у меня возникли проблемы с синтаксисом импорта. Теперь всё отлично работает! Большое спасибо! Это решило проблему. ♡