tailvue
tailvue copied to clipboard
Toast - Dark mode text remains black
@hades200082 do you have any other css packages/sets going on that could be interfering? I haven't seen this in any of my projects
Nope. I just follow the install instructions on a brand new vite/vue3 app to see how it works before using it in a production app.
Here's my package.json
{
"name": "test-tailvue",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "run-p type-check build-only",
"preview": "vite preview --port 4173",
"build-only": "vite build",
"type-check": "vue-tsc --noEmit",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
},
"dependencies": {
"pinia": "^2.0.21",
"tailvue": "^0.1.62",
"vue": "^3.2.38",
"vue-router": "^4.1.5"
},
"devDependencies": {
"@iconify/vue": "^4.0.0",
"@rushstack/eslint-patch": "^1.1.4",
"@types/node": "^16.11.56",
"@vitejs/plugin-vue": "^3.0.3",
"@vue/eslint-config-prettier": "^7.0.0",
"@vue/eslint-config-typescript": "^11.0.0",
"@vue/tsconfig": "^0.1.3",
"eslint": "^8.24.0",
"eslint-plugin-vue": "^9.3.0",
"npm-run-all": "^4.1.5",
"prettier": "^2.7.1",
"typescript": "~4.7.4",
"vite": "^3.0.9",
"vite-plugin-windicss": "^1.8.8",
"vue-tsc": "^0.40.7",
"windicss": "^3.5.6"
},
"dependenciesMeta": {
"[email protected]": {
"unplugged": true
},
"[email protected]": {
"unplugged": true
}
}
}
What does your windi.config.ts
took like?
import { defineConfig } from "windicss/helpers";
import formsPlugin from "windicss/plugin/forms";
import typography from 'windicss/plugin/typography';
export default defineConfig({
extract: {
include: [
"index.html",
"./**/*.vue",
".yarn/unplugged/tailvue-virtual-96e2bcddb9/node_modules/tailvue/dist/tailvue.es.js"
],
},
shortcuts: {
"btn": "focus:(outline-none) hover:(opacity-90) dark:(from-indigo-500 to-indigo-600) bg-gradient-to-l from-indigo-700 to-indigo-800 w-48 h-12 text-lg text-white rounded-sm",
},
darkMode: "class",
theme: {
extend: {
},
},
plugins: [formsPlugin,typography],
});
try also adding this to your include
"node_modules/tailvue/dist/tailvue.umd.js",
so you'd end up with like:
include: [
// ...
"node_modules/tailvue/dist/tailvue.es.js",
"node_modules/tailvue/dist/tailvue.umd.js",
],
I now have this in the windi.config.ts. Same issue persists.
import { defineConfig } from "windicss/helpers";
import formsPlugin from "windicss/plugin/forms";
import typography from 'windicss/plugin/typography';
export default defineConfig({
extract: {
include: [
"index.html",
"./**/*.vue",
".yarn/unplugged/tailvue-virtual-96e2bcddb9/node_modules/tailvue/dist/tailvue.es.js",
".yarn/unplugged/tailvue-virtual-96e2bcddb9/node_modules/tailvue/dist/tailvue.umd.js"
],
},
shortcuts: {
"btn": "focus:(outline-none) hover:(opacity-90) dark:(from-indigo-500 to-indigo-600) bg-gradient-to-l from-indigo-700 to-indigo-800 w-48 h-12 text-lg text-white rounded-sm",
},
darkMode: "class",
theme: {
extend: {
},
},
plugins: [formsPlugin,typography],
});
ok I think I know what your issue is, if you started from vite/vue3 template check your src/assets/base.css
and make sure there are not any css overrides there
I think these css are messing with it
I actually deleted that file (all the default CSS files actually) after installing windicss.
The only CSS file I can find included is the one from windicss...
// @/src/main.ts
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import router from "./router";
import "virtual:windi.css"; // <---------------
const app = createApp(App);
app.use(createPinia());
app.use(router);
app.mount("#app");
The issue persists.
I've extended the duration of the toast to get a good look at the classes that are applied to the text...
I can't see any classes here that would change the colour in dark mode.
I feel like I've missed something silly and just can't see it.
Strange, let me look more into, in the playground environment we have setup we are not running into that issue. Maybe something weird is happening with that version of windicss
I'm also facing this problem. Is there a way to disable the dark mode completely? Thank you!
I have the same issue, but I don't have any windicss, I have tailwindcss, and flowbite
Facing the same issue using tailwind css. This is my package.json
file:
{
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 nuxt dev --https --ssl-cert localhost.pem --ssl-key localhost-key.pem",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare",
"lint:js": "eslint --ext \".ts,.vue\" --ignore-path .gitignore .",
"lint:prettier": "prettier --check .",
"lint": "yarn lint:js && yarn lint:prettier",
"lintfix": "prettier --write --list-different . && yarn lint:js --fix"
},
"devDependencies": {
"@iconify/vue": "^4.1.1",
"@nuxt/devtools": "^1.0.8",
"@nuxt/image": "^1.4.0",
"@nuxtjs/eslint-config-typescript": "^12.0.0",
"@nuxtjs/eslint-module": "^4.1.0",
"@nuxtjs/html-validator": "^1.2.5",
"@nuxtjs/tailwindcss": "^6.7.0",
"@pinia-plugin-persistedstate/nuxt": "^1.2.0",
"@tailvue/nuxt": "^1.0.0",
"@tailwindcss/forms": "^0.5.3",
"@tailwindcss/typography": "^0.5.9",
"@typescript-eslint/parser": "^6.0.0",
"autoprefixer": "^10.4.14",
"eslint": "^8.40.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.1.3",
"nuxt": "^3.5.0",
"postcss": "^8.4.23",
"prettier": "^3.2.5",
"sass": "^1.62.1",
"tailwindcss": "^3.3.2",
"typescript": "^5.0.4"
},
"dependencies": {
"@fontsource/karla": "^5.0.3",
"@fontsource/rubik": "^5.0.3",
"@headlessui/vue": "^1.7.13",
"@nuxt/image-edge": "^1.3.0-28475144.d8420f5",
"@pinia/nuxt": "^0.5.1",
"feather-icons": "^4.29.0",
"moment": "^2.30.1",
"moment-timezone": "^0.5.45",
"pinia": "^2.1.7",
"v3-infinite-loading": "^1.2.2",
"vue-feather": "^2.0.0"
},
"overrides": {
"pinia": {
"vue": "^3.0.0"
}
}
}
And this is my tailwind.config.js
file:
const defaultTheme = require("tailwindcss/defaultTheme");
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"node_modules/tailvue/dist/tailvue.es.js",
"node_modules/tailvue/dist/tailvue.umd.js",
"./components/**/*.{js,vue,ts}",
"./layouts/**/*.vue",
"./pages/**/*.vue",
"./plugins/**/*.{js,ts}",
"./nuxt.config.{js,ts}",
"./app.vue",
],
theme: {
screens: {
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1280px",
},
colors: {
white: "#FFFFFF",
red: "#F80B0B",
black: {
DEFAULT: "#1D1E20",
50: "#F4F4F4",
100: "#E8E8E9",
200: "#D2D2D2",
250: "#C0C2C5",
500: "#8B8C8D",
750: "#555658",
900: "#2A2B2E",
},
blue: {
DEFAULT: "#0097FF",
dark: "#0088E5",
50: "#E6F5FF",
250: "#BFE5FF",
500: "#7DC9FE",
750: "#59BCFF",
},
lorange: {
DEFAULT: "#FFAE00",
200: "#FFEFCC",
400: "#FFDF99",
600: "#FFCE66",
800: "#FFBE33",
},
orange: {
DEFAULT: "#FA8248",
button: "#F29100",
200: "#FEE6DA",
400: "#FDCDB6",
600: "#FCB491",
800: "#FB9B6C",
},
yellow: {
DEFAULT: "#FFC90F",
200: "#FFF4CF",
400: "#FFE99F",
600: "#FFDF6F",
800: "#FFD43F",
},
gray: {
100: "#f3f4f6",
200: "#e5e7eb",
},
},
},
plugins: [require("@tailwindcss/forms")],
darkMode: "class", // Turns off dark mode
};