Based on the guides on how to setup TailwindCSS for specific frameworks I'm trying to add it to my new Vue 3 app. I'm not using Vite yet but couldn't find a Vue CLI guide.
I know there is the vue-cli-plugin-tailwind solving this but the current version is in beta so I would like to do it on my own for now.
First I created a Vue 3 app using the Vue CLI. After that I followed the guide for Angular apps
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
Inside the tailwind.config.js file use this content
.
content: [
"./public/index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
Create a new file ./src/styles.css
.
#tailwind base;
#tailwind components;
#tailwind utilities;
Inside the main.ts file add import "./styles.css";
Add the following code to the App.vue file
.
<div class="bg-red-500">
Background should be red
</div>
Unfortunately the background is not red.
Does someone know how to setup the project?
Related
Current
I have two repositories:
Main Web App - simple nuxt3 web app
Component Library - simple vite/vue app
Goal
Build my own component library using vite, vue3 and tailwindcss
Problem
When I use npm run dev I can se my components working fine (from the vite app) but when I build my library npm run build:watch and import them in another project (nuxt app) tailwind classes/styles are not working
This is mi vite app (all good)
This is the nuxt app where I imported the component (no style)
Repositories:
Main Web App: https://github.com/fro-systems/clau-web
Component Library: https://github.com/fro-systems/clau-components
Adding this to package.json on the vite-libray
"exports": {
"./dist/style.css": "./dist/style.css"
},
And addin this nuxt.config.ts
css: [
"clau-components/dist/style.css"
],
The issues was that I wasn't adding the styles
I have followed the official Tailwind + Nuxt documentation to add Tailwind to Nuxt. I have done so for 2 new Projects and 1 existing Nuxt project. And it works fine for the first 2 projects, but...
The existing Nuxt project is giving me a hard time now as it seems to ignore the tailwind.config.js file.
Tailwind works but it is using the default config, no matter what changes I make to the config file. Nuxt also does not hot-reload when changes are made to the config.
My IDE on the other hand detects the changes and offers them as IntelliSense auto-complete option.
I am pretty lost and not sure where to start troubleshooting. Happy to share the repo if that helps.
Any help greatly appreciated. Thanks!
-- Miss J
Did you register tailwindcss in the buildModules of the nuxt.config.js (and not modules) ?
buildModules: [
// https://go.nuxtjs.dev/tailwindcss
'#nuxtjs/tailwindcss'
],
Can you add some of your code to help troubleshoot ?
package.json
nuxt.config.js
tailwind.config.js
What are you trying to change inside the tailwind config ?
The Nuxt module for Tailwind CSS is using v1.9.6 and not the latest v.2.0.3, so some things you try to change in your config file following the docs are maybe not possible with the current nuxt package.
You can upgrade to latest Tailwind version :
https://stackoverflow.com/a/30650609/13541914
yarn add --dev tailwindcss#npm:#tailwindcss/postcss7-compat postcss#^7 autoprefixer#^9
All I did was add a tailwind.config.js file.
Hope it helps
Now I am working on a Nuxt project. Currently, there are many useful packages that make vue more enjoyable to use. But I've managed to find Nuxt packages. So I am wondering if there is any good way to use Vue packages in Nuxt projects. For example, vue has good packages related to google map including vue-google-maps. It would be great if I can use it in Nuxt.
vue-google-maps documentation has an example of how to add the package as a nuxt plugin. Add a js file (eg, google-maps.js) in your /plugins directory:
import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'
Vue.use(VueGoogleMaps, {
// your config here
}
And then, in your nuxt.config.js:
plugins: [
{ src: '~/plugins/google-maps' },
],
Most Vue packages should work just fine in Nuxt after these steps.
I am not familiar with packing frontend projects. When I was writing frontend, we just used JQuery. So the problem is now I have a project created by vue-cli and packed by webpack.
But as I don't want to load libraries from my local server but from remote CDN. How should I change the yarn add dependencies into CDN based form during yarn build? What is the correct way to do this kind of packing?
I've searched a lot but cannot find a good solution, some may suggest adding all CDN in the head section. But that's difficult to manage.
1. update your public/index.html adding the vue script source for the cdn (preferably in the head)
<script src="https://cdn.jsdelivr.net/npm/vue#2.6"></script>
2. create a vue.config.js file in the project root with the following configuration. (if you already have the file, add configureWebpack block to it)
module.exports = {
configureWebpack: {
externals: {
Vue: "vue"
}
}
};
this will flag the Vue dependency as a global, and not add it into the vendor bundle. You can do the same with other dependencies like element-ui, vuetify, vuex, etc...
I'm new to Aurelia, so I'm not really sure how this should work. I created a new Aurelia project and also installed bootstrap simply by doing jspm install bootstrap. I saw in console that this also pulled in jquery 3.0.0.
Now my question is, how do I use bootstrap.css, bootstrap.js and jquery.js in my project?
First attempt:
In app.html I tried to do thhe following:
<require from="bootstrap"></require>
I tried that because I have the following line in my config.js:
map: {
...
"bootstrap": "github:twbs/bootstrap#3.3.6",
...
}
This sort of works in the sense that it loads bootstrap.js, but then gives an error in browser that it's missing jquery.js. So it's not automatically loading jquery for me. Is this normal?
Second attempt:
I changed my require to this in app.html:
<require from="jquery/dist/jquery.js"></require>
<require from="bootstrap/css/bootstrap.css"></require>
<require from="bootstrap/js/bootstrap.js"></require>
I'm not sure how it knows where to look for the bootstrap.js and bootstrap.css file, since they are located in: jspm_packages/github/twbs/bootstrap#3.3.6/css/bootstrap.css etc. But it knows how to find the bootstrap files. But not the jquery file.
I have this in my config.js for jquery:
map: {
...
"github:twbs/bootstrap#3.3.6": {
"jquery": "npm:jquery#3.0.0"
},
....
}
So basically my question is, how should this work? Should require autoload all the necessary files when I <require from="bootstrap">. Or should I still load them as individual files? If so, how do I then load jquery in this case?
The require element is for pulling in Aurelia components, html templates (which are Aurelia components), or css files. It isn't for loading javascript files.
The Aurelia skeleton shows how to load Bootstrap in its main.js file:
import 'bootstrap';
is the first line in the file. This will initialize Bootstrap's javascript code.
In app.html a require element is used to load Bootstrap's css:
<require from="bootstrap/css/bootstrap.css"></require>
Importing jQuery in to a file is pretty simple as well:
import $ from 'jquery';
Then you can use the $ function however you would like.
I had this problem then installed latest node and npm, and then from the tutorial page on the aurelia site:-
To get Bootstrap setup, we begin by installing the library itself with NPM. Execute the following on the command line to do this:
npm install bootstrap --save
Next, because Bootstrap uses jQuery, we want to install jQuery as well, like this:
npm install jquery#^2.2.4 --save
then restarted the app as packages were updated and ran it again ... FIXED!
after adding
import 'bootstrap';
in main.js, you may need to stop the app (Ctrl + c) and run it again with
au run --watch
to make it work.