I'm having a problem where I can't make my Tailwind classes show in my project. I tried following all the open threads regarding this question but couldn't find a solution. Any help would be appreciated.
My Files and Folders:
tailwind.config.js:
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
"./src/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
};
main.js:
import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'
import './tailwind.css'
createApp(App).mount('#app')
tailwind.css:
#tailwind base;
#tailwind components;
#tailwind utilities;
App.vue:
<script setup>
</script>
<template>
<div class="text-5xl text-red-500 bg-slate-600 p-32 m-4">
test
</div>
</template>
Project Tree:
📦Project
┣ 📂src
┃ ┣ 📂assets
┃ ┃ ┗ 📜main.css
┃ ┣ 📂components
┃ ┣ 📜App.vue
┃ ┣ 📜main.js
┃ ┗ 📜tailwind.css
┣ 📜index.html
┣ 📜package-lock.json
┣ 📜package.json
┣ 📜tailwind.config.js
┗ 📜vite.config.js
Related
I'm trying to build the default Vuetify example (HelloWorld.vue and App.vue) into a WebComponent that I can then insert into a simple HTML page.
HelloWorld.vue:
import {
VCol,
VContainer,
VRow,
VImg
} from "vuetify/lib"
export default {
name: 'HelloWorld',
components: {
VCol,
VContainer,
VRow,
VImg
},
.....
App.vue:
<template>
<v-app>
<v-app-bar
app
color="primary"
dark
>
....
import Vuetify from "vuetify/lib";
import Vue from 'vue'
import HelloWorld from './components/HelloWorld';
Vue.use(Vuetify)
var vuetify = new Vuetify({
});
import {
VApp,
VMain,
VAppBar,
VIcon,
VSpacer,
VBtn,
VImg
} from "vuetify/lib"
export default {
name: 'App',
vuetify,
components: {
HelloWorld,
VApp,
VMain,
VAppBar,
VIcon,
VSpacer,
VBtn,
VImg
},
.........
#import "../node_modules/vuetify/dist/vuetify.min.css"
To build the component, I use vue-cli-service build --target wc --name test-build ./src/App.vue which creates the component in the dist folder.
When I use this new WebComponent in an HTML page, the color of the top bar becomes black and not primary (see images).
[enter image description here](https://i.stack.imgur.com/zYmIr.png)
I imported the Vuetify CSS in the App.vue: #import "../node_modules/vuetify/dist/vuetify.min.css" but it didn't work.
Problem: My vue3 app which uses a Pinia store works as expected when deployed locally. When deployed to a server it fails to display the page which accesses the store.
The problem is the same on Firebase (emulator and live site) and with Netlify which makes me think there is some (probably very simple!) explanation hidden in the code.
To pare it down I have made what I think are minor changes to the vanilla vue-create app.
main.js
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import router from "./router";
import "./assets/main.css";
const app = createApp(App);
app.use(createPinia());
app.use(router);
app.mount("#app");
App.vue
<script setup>
import { RouterLink, RouterView } from "vue-router";
import HelloWorld from "./components/HelloWorld.vue";
</script>
<template>
<header>
<img
alt="Vue logo"
class="logo"
src="#/assets/logo.svg"
width="125"
height="125"
/>
<div class="wrapper">
<HelloWorld msg="You did it!" />
<nav>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
</nav>
</div>
</header>
<RouterView /></template>
<style>
...
</style>
views/AboutView.vue
<script setup>
import { useCounterStore } from "../stores/counter";
const newCounter = useCounterStore();
</script>
<template>
<div class="about">
This is an about page
{{newCounter.count}}
</div>
</div>
</template>
<style></style>
stores/counter.js
import { ref, computed } from "vue";
import { defineStore } from "pinia";
export const useCounterStore = defineStore("counter", () => {
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
function increment() {
count.value++;
}
return { count, doubleCount, increment };
});
package.json
{
"name": "firebase-tester",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
},
"dependencies": {
"pinia": "^2.0.23",
"vue": "^3.2.41",
"vue-router": "^4.1.5"
},
"devDependencies": {
"#rushstack/eslint-patch": "^1.1.4",
"#vitejs/plugin-vue": "^3.1.2",
"#vue/eslint-config-prettier": "^7.0.0",
"eslint": "^8.22.0",
"eslint-plugin-vue": "^9.3.0",
"prettier": "^2.7.1",
"vite": "^3.1.8"
}
}
Commands to build
nom run dev
(Runs as expected on local server, with value of count shown on 'about' page
npm run build
Builds a dist folder
firebase emulators:start
Emulator shows home page as expected but clicking does nothing, and no further navigation possible.
firebase deploy
Same issues as with emulator
To test if firebase was the problem, I have also deployed to a Netlify site, which has identical problems.
No doubt there is a really obvious problem staring me in the face, but I'm not seeing it!
All help appreciated.
In order for SPA to route correctly, a configuration file must be supplied with Firebase and Netlify. For both, as far as I remember correctly, this must be located unchanged in the dist, i.e. application root. So the best place before the build will be public.
For firebase it is firebase.json and for Netlify it is _redirect.
Deploy Firebase
Redirects explained (Netlify)
Rewrites
I am not sure if this fixes the problem with the Pinia store but this is an initial requirement before continuing troubleshooting the Pinia issue.
I have installed tailwind according to the documentation in tailwindcss.com with vue in laravel. But its rendered like this below -
Why ?
Configuration:
Installed tailwindcss using commands
npm install -D tailwindcss
npx tailwindcss init
2)In tailwind.config.js added
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
3)In input.css added
#tailwind base;
#tailwind components;
#tailwind utilities;
For extra plugins ran this command
npm install #headlessui/vue #heroicons/vue
In main.js:
import { createApp } from 'vue'
import store from './store'
import App from './App.vue'
import './input.css'
createApp(App)
.use(store)
.mount('#app')
Try using PostCSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
https://tailwindcss.com/docs/installation/using-postcss
on tailwind.config.js:
module.exports = {
purge:
"./src/**/*.html",
"./src/**/*.vue",
"./src/**/*.jsx",
],
//
};
it's simply adding the ones in the purge, after that, the vue is rendered properly, I think that the problem is that we haven't included vue on the tailwind configuration.
There are two tailwind.config.js files, one at the project level and the other at the vue directory. Copy and paste the following at the vue directory level
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{html,js,vue,js,ts,jsx,tsx}"
],
theme: {
extend: {},
},
plugins: [
require('#tailwindcss/forms')
],
}
Trying to import Foundation breakpoint util into Vue-CLI to be available to every component but getting error:
SassError: (small: 0, medium: 640px, large: 1024px, xlarge: 1200px, xxlarge: 1440px) isn't a valid CSS value.
â•·
36 │ $-zf-breakpoints-keys: map-to-list($breakpoints, 'keys');
│ ^^^^^^^^^^^^
╵
node_modules/foundation-sites/scss/util/_breakpoint.scss 36:36 #import
src/scss/_custom.scss 4:9
My setup looks like this:
vue.config.js:
module.exports = {
css: {
loaderOptions: {
scss: {
prependData: `#import "~#/scss/_custom.scss";`
}
}
},
}
_custom.scss:
#import '~foundation-sites/scss/util/breakpoint';
main.js:
import Vue from 'vue'
import App from './App.vue'
import "./components";
import './scss/app.scss';
new Vue({
render: h => h(App),
}).$mount('#app')
app.scss:
#import '~foundation-sites/scss/util/util';
#import 'global';
#import '~foundation-sites/scss/foundation';
My colleague managed to solve this.
In the project root folder created a file called .sassrc:
{
"includePaths": [ "node_modules" ]
}
Removed #import '~foundation-sites/scss/util/breakpoint'; from _custom.scss.
Changed vue.config.js to this (importing the whole foundation lib):
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `
#import "~#/scss/_custom.scss";
#import 'foundation-sites/scss/foundation';
`
}
}
}
}
And now breakpoints util can be used within each Vue component with scoped css.
When adding base/global styles in Vue, is it best practice to require them in my main.js?
import Vue from 'vue';
import App from './App.vue';
import store from './store/';
require('./assets/scss/main.scss');
Vue.config.productionTip = false;
new Vue({
store,
render: h => h(App)
}).$mount('#app')
Or is it better to import them in my App.vue?
<style lang="scss">
#import 'src/assets/scss/main.scss';
</style>
There's no difference importing in App.vue or in main.js, just do not forget that the style tag in App.vue must not have the attribute scoped or the import will not work, I personally prefer to do inside the main.js, but with vue-cli 3 IMHO this approach is much better:
vue.config.js
// vue.config.js
module.exports = {
css: {
loaderOptions: {
// pass options to sass-loader
sass: {
// #/ is an alias to src/
// so this assumes you have a file named `src/variables.scss`
data: `#import "#/variables.scss";`
}
}
}
}
PS: Do not forget that in vue, when importing modules, you can use the alias # that maps into the /src folder of files.
In a project of mine I have this import in main.js
import '#/assets/scss/index.scss';
For more information: https://cli.vuejs.org/guide/css.html