I am trying to add tailwind to vue project, in order to do this I am following the next steps:
Version of vue
vue --version
#vue/cli 4.3.1
Create project
vue create tailwindproject
(node-sass, babel, router, eslint, with dedicated files)
Install tailwind
npm install tailwindcss
Create css file on:
touch ./src/styles/tailwind.scss
Copy the following content on ./src/assets/styles/tailwind.scss
#tailwind base;
#tailwind components;
#tailwind utilities;
Add the following line into main.js
import './assets/styles/tailwind.scss'
Execute
npm run serve
And appears the following message
Failed to resolve loader: sass-loader You may need to install it.
Install sass-loader with
npm install --save sass-loader
And appear the following error:
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Cannot find module 'sass'
I solved this with:
npm install --save-dev node-sass
Run server again, but the view looks without tailwind css.
are there any way of install correctly tailwind with sass and vue4?
Thanks
You need to pass the compiled css file through postcss. TailwindCSS is a postcss plugin, Sass cannot do anything with it. I think you should check the docs again.
Basically create a postcss.config.js file with this:
module.exports = {
plugins: [
require('tailwindcss'),
]
}
Then import your tailwind.css file in Vue.
Alternatively you can use tailwind cli npx tailwindcss init to setup tailwind.
Related
So I have been trying to install tailwind inside a Vue Project.
I initialized the vue project using:
vue create project-name.
Then I add tailwind as a plugin using the command:
vue add tailwind and then select the minimal option. I suspect the plugin is installed correctly but still I get the below error :
In the package.json, tailwind & autoprefixer can be seen correctly installed. Also postcss.config.js & vue.config.js files have been added successfully & correctly.
But when I run to serve the page, I get this error:
I can't figure out what's going wrong here. Please help.
Try to delete the postcss.config.js then run the following command at the project root :
npx tailwindcss init -p
this command will create postcss.config.js and tailwind.config.js files.
In my case I changed the ("./tailwind.config.js") to ("./tailwind.config.cjs") in postcss.config.cjs plugins
I want to use tailwind typeahead vue plugin in nuxt. i have added the package using npm install vue-tailwindcss-typeahead .
then i created a file in plugins folder. tailwind-typeahead.js with following code
import Vue from 'vue'
import VueTailwindcssTypeahead from 'vue-tailwindcsscss-typeahead'
Vue.use(VueTailwindcssTypeahead)
and included the plugin file in nuxt.config.js
{ src: './plugins/tailwind-typeahead.js' }
But i am getting this error
This dependency was not found: friendly-errors 01:44:37
friendly-errors 01:44:37
* vue-tailwindcsscss-typeahead in ./plugins/tailwind-typeahead.js friendly-errors 01:44:37
friendly-errors 01:44:37
To install it, you can run: npm install --save vue-tailwindcsscss-typeahead
for reference here is the link of package
https://github.com/basarozcan/vue-tailwindcss-typeahead
You do have a typo in your plugin: vue-tailwindcsscss-typeahead.
You probably meant to write vue-tailwindcss-typeahead .
The rest is fine and it's the way to go if you want your code to be globally available in your Nuxt app. If you only want it local, import it in the component itself.
I am quite unfamiliar with npm, (I develop in python) and most of the time I just do what the tutorial says. But now I am stuck. I tried Tailwindcss in combination wit 'Vue 3' and followed the install steps from the website:website tailwind+Vue 3
npm init #vitejs/app my-project
cd my-project
npm install
npm install -D tailwindcss#latest postcss#latest autoprefixer#latest
npx tailwindcss init -p
And after adding some HTML and running:
npm run dev
everything works fine in the browser.
But then Iwant to build it for using in production I use
npm run build
and after some processing my dist folder is filled with an index.html and assets.
And here starts my problem. I was expecting that I could copy these files to my server and that it should serve my site. But All I see is a blank page.
I can't find the answer anywhere or others with same problems so I think its something stupid I just don't know. But what is it?
Hope someone can help me...
Try this, maybe something will work
https://dev.to/vonagedev/using-tailwind-css-with-vue-js-b1b
Webpack (and Vue-loader which is a Webpack loader for Vue.js components) can be configured to use PostCSS which is a Webpack loader for CSS.
It will look for the configuration inside a postcss.config.js file and can build the app with CSS from packages you add.
And, configure it using this code.
// postcss.config.js
const autoprefixer = require('autoprefixer');
const tailwindcss = require('tailwindcss');
module.exports = {
plugins: [
tailwindcss,
autoprefixer,
],
};
The demo app is also generated without any CSS assets. Instead, it uses CSS inside the components (which is fine). To include Tailwind CSS, create a CSS asset using your editor or the commands below.
# mkdir -p for making parents they don't exist
mkdir -p src/assets/styles/
touch src/assets/styles/index.css
Now add this code, which adds the various packages of the Tailwind CSS library.
/* src/assets/styles/index.css */
#tailwind base;
#tailwind components;
#tailwind utilities;
```
I am creating a stencil project which uses an npm package inside it, is there any options to add an npm package inside stencil project. Any suggestions I searching for a solution for quite a while.
This is how i use ck-editor in angular
<ck-editor name="editor" #myEditor [(ngModel)]="templateSetValue.template_content"
(change)="handleEditorData($event)">
</ck-editor>
Is it possible to use the same is stencil project
https://www.npmjs.com/package/ngx-ckeditor
Not sure if I understood the question correctly, but to add a package from npm in your Stencil.js project, you can just install it, like you would in any other node project:
npm install <some-package>
For example nprogress:
npm install nprogress #types/nprogress
and then import it in your code like
import nprogress from 'nprogress';
nprogress.start();
// ...
According to the documentation (https://cli.vuejs.org/guide/build-targets.html#library), it's not clear to me how to integrate babel to make the lib built be IE11-friendly... I have to make a npm package from a Vue component.
My npm script in package.json is:
vue-cli-service build --target lib src/MyComponent.vue
I've put a correct "browserslist" in package.json.
It seems that I have to use a babel.config.js with a preset.
Not sure of what to install as dev dependencies and what to configure...
Anyone has a working sample lib or some guidance, please?
Answering to myself :-) It was documented but at several places. So...
Add these dev dependencies:
npm install --save-dev #vue/cli-plugin-babel #babel/preset-env
Add this dependency:
npm install --save #babel/polyfill current-script-polyfill
In your main Vue file, import 'current-script-polyfill' before anything else
Indeed define a browserslist in package.json
Indeed have a babel.config.js with
presets: [
['#vue/app']
]
}
Edit : now we use a .browserlistrc file instead of definition in package.json. Here is what we use, thanks for asking:
> 1%
last 2 versions
not ie < 11