I am working on a Vue + Nuxt + Tailwind project and using the marked library to convert a text into markdown.
The issue is that some styles like "Headings" and "Link" are loading properly, while some basic styles like "bold", "italics" are working fine.
For example:
When I use "*hello* world", it gets converted to "hello world".
When I use "# hello world", it does not increase the size of the text.
When I use "[google](https://google.com)", it does create a link, but the link is not blue colored.
Not sure what the issue is here. If any more details are required, please let me know.
Its because of the tailwind.css
in tailwind, h1 - h6 headers dont work.
Option 1)
add this to your tailwind.config.js:
module.exports = {
corePlugins: {
preflight: false,
},
....
}
source :https://github.com/tailwindlabs/tailwindcss/issues/1460
Option 2)Try adding custom css for h1..h6 in your css file.
https://www.w3schools.com/tags/tag_hn.asp copy the styles from here
Similarly try add custom css for other issues.
The solution to this was using Tailwind CSS's typography plugin.
Here are the steps to be followed:
Install the plugin first.
Using npm
npm install #tailwindcss/typography
Using Yarn
yarn add #tailwindcss/typography.
Then add the plugin to your tailwind.config.js file:
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('#tailwindcss/typography'),
// ...
],
}
Then add the prose class to the element where you are displaying the markdown.
<div class="prose" v-html="cleanedMarkdown"></div>.
This provided the needed formatting for the markdown.
Related
I have a VueJS setup with Vite, Tailwind CSS and postcss, and would like to define different colors using variables in a .env.name file so that I can apply different color themes depending where the code is deployed.
I tried with a .env file containing
VITE_COLOR="FF0000"
and an import within the tailwind.config.js
...
theme: {
colors: {
primary: import.meta.env.COLOR
}
}
...
However, I get the following error:
SyntaxError: Cannot use 'import.meta' outside a module
What do I have to change to get this to work or is there an even better method?
Tailwind config is CommonJS file (not module) so you cannot use ES6 features like import
You can install package called dotenv
npm i dotenv
Require it on top of your tailwind config file like
require('dotenv').config()
module.exports = {/** */}
create color variable in .env. Note as we require it out of Vite's scope it may not be prefixed with VITE_
ANY_COLOR='#ffc8dd'
Now you can access it in tailwind config
theme: {
colors: {
primary: process.env.ANY_COLOR
}
}
This will work BUT if you change color in .env file you need to rebuild your styles again. If it is OK for you (one deployment - one color anyway) - fine. I personally would suggest another solution based on CSS variables - link to CanIUse
Define variable in CSS file or create style tag within <head> tag in index.html
:root {
--theme-color: #ffc8dd;
}
and in config
theme: {
colors: {
primary: 'var(--theme-color)'
}
}
And that's it - no extra packages, extra work and if you change CSS variable, changes will be applied on the fly - even in production as we are using CSS functionality
I'm using Express/Node with Pug as the view template. Attempting to use Tailwind for styling, but have been unable to get Tailwind to modify my CSS based on the classnames added in the Pug files. Has anyone run into this before?
Here is the Pug file where I'm attempting to modify how "Testing tailwind" will display. However, it loads with black plain text.
I was able to populate my style.css file with the tailwind boilerplate base, components, and utilities. If I style the class name in styles.css it works, so the file is linked correctly...
Most likely Tailwind was not render. In this article and this video show how to do it.
You must install tailwindcss postcss autoprefixer postcss-cli
npm install tailwindcss postcss autoprefixer postcss-cli
Create postcss.config.js
module.exports =
{
plugins:
{
tailwindcss: {},
autoprefixer: {},
},
}
and tailwind.config.js
/** #type {import('tailwindcss').Config} */
module.exports =
{
content:
[
'./views/*.{pug, html}',
],
theme:
{
extend:
{
},
},
plugins:
[
],
}
And public/styles/tailwind.css css file within
#tailwind base;
#tailwind components;
#tailwind utilities;
To package.json add script
"tailwind:build": "postcss public/styles/tailwind.css -o public/styles/style.css",
And now you can build tailwind for your pug templates or some other html files. Just run npm run tailwind:build and open your host
But for don't running again and again this script you can watching for files with this script
"tailwind:watch": "postcss public/styles/tailwind.css -w -o public/styles/style.css"
Just run npm run tailwind:watch and your css file will be updating on change tailwind.css file
module.exports = {
content: ["./**/*.pug"],
theme: {
extend: {},
},
plugins: [],
};
try like this:
I recently encountered this problem. I was following this video and at the end, tailwind didn't seem to work at all.
After looking at document, I tried a new approach and it worked:
Instead of:
doctype html
html(lang="en")
head
meta(charset="utf-8")
meta(http-equiv="X-UA-Compatible", content="IE=edge")
meta(name="viewport", content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0")
title Node.js with TailwindCSS, Express and Pug
// Injecting css file as the tutorial
link(href="./styles/style.css", rel="stylesheet")
body
h1 Hello world!
p My starter template
Try this:
doctype html
html(lang="en")
head
meta(charset="utf-8")
meta(http-equiv="X-UA-Compatible", content="IE=edge")
meta(name="viewport", content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0")
title Node.js with TailwindCSS, Express and Pug
// Follow the document
style
include ../public/styles/styles.css
This worked out for me, I hope this helps some of you.
Happy coding!
In one of my projects, I build a nice vue3 component that could be useful to several other projects. So I decided to publish it as an NPM package and share it with everyone.
I wrote the isolate component, build it and publish BUT I use Tailwind css to make the style.
When I publish and install the component everything is working BUT without the beauty of the css part.
I tried several configurations and alternative tools to generate the package that automatically add the tailwind as an inner dependency to my package.
Does someone have experience with this? how can build/bundle my component by adding the tailwind CSS instructions into it?
You're almost there
Since you've got your component working, the majority of the part has been done.
For configuring the styling of the component you need to identify the Tailwind CSS classes being used by your Vue component package and retain them in the final CSS that is generated by the Tailwind engine in your project.
Follow below steps in the project where you want to use your tailwind vue component package.
For Tailwind CSS V3
// tailwind.config.js
module.exports = [
//...
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
"./node_modules/package-name/**/*.{vue,js,ts,jsx,tsx}" // Add this line
// Replace "package-name" with the name of the dependency package
],
//...
]
For Tailwind CSS V2
// tailwind.config.js
module.exports = [
//...
purge: {
//...
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
"./node_modules/package-name/**/*.{vue,js,ts,jsx,tsx}" // Add this line
// Replace "package-name" with the name of the dependency package
],
//...
//...
}
]
The content property in the tailwind.config.js file defines file path pattern that the tailwind engine should look into, for generating the final CSS file.
For Pro users
You may also try to automate the above setup by writing an install script for your npm package to add this configuration to the tailwind.config.js file
References
Tailwind Docs - 3rd party integration
It's a bit difficult for someone to answer your question as you've not really shared the source code, but thankfully (and a bit incorrectly), you've published the src directory to npm.
The core issue here is that when you're building a component library, you are running npm run build:npm which translates to vue-cli-service build --target lib --name getjvNumPad src/index.js.
The index.js reads as follows:
import component from './components/numeric-pad.vue'
// Declare install function executed by Vue.use()
export function install (Vue) {
if (install.installed) return
install.installed = true
Vue.component('getjv-num-pad', component)
}
// Create module definition for Vue.use()
const plugin = {
install
}
// Auto-install when vue is found (eg. in browser via <script> tag)
let GlobalVue = null
if (typeof window !== 'undefined') {
GlobalVue = window.Vue
} else if (typeof global !== 'undefined') {
GlobalVue = global.Vue
}
if (GlobalVue) {
GlobalVue.use(plugin)
}
// To allow use as module (npm/webpack/etc.) export component
export default component
There is no mention of importing any CSS, hence no CSS included in the built version.
The simplest solution would be to include the index.css import in your index.js or the src/components/numeric-pad.vue file under the <style> section.
Lastly, I'm a bit rusty on how components are built, but you might find that Vue outputs the CSS as a separate file. In that case, you would also need to update your package.json to include an exports field.
I'm using Nuxt with Vuetify.
I created a class and assigned it some padding.
The class is defined in a unscoped <style> in layouts/default.vue.
when I'm on development mode (npm run dev) everything looks great as I aimed for.
the class is on container element so the final html looks like
<div class="container container--fluid my-class">
the devtools look like that when I'm on dev mode:
so my-class is applied. But once I build the project (npm run generate) my-class is overridden by the container class rules:
I guess it is happening because of the order in which the classes combined into a single css but not sure it behaves differently for dev and built projects.
How can I fix it?
After some more digging it seems to be a known issue with nuxt.
It happens when declaring styles in non-scoped style tag, and using it somewhere else.
I followed these steps: https://stackoverflow.com/a/60925793/9103301
which is basically integrating Vuetify into nuxt manually and not with #nuxt/vuetify.
then I could control over the order the css is loaded in nuxt.config.js - first vuetify and then my styling (which I moved from the layout the a css file).
a more basic vuetify plugin that worked for me:
import Vue from "vue"
import Vuetify from "vuetify"
version "^2.1.1" ,
Vue.use(Vuetify)
export default (ctx) => {
const vuetify = new Vuetify({
theme: {
dark: false, // From 2.0 You have to select the theme dark or light here
},
})
ctx.app.vuetify = vuetify
ctx.$vuetify = vuetify.framework
}
You'll have to install icons as well, vuetify default is mdi which is installed with npm install #mdi/font -D
managed to fix this by disabling tree shaking for vuetify. Change the following in nuxt.config.js:
buildModules: [
["#nuxtjs/vuetify", { treeShake: false }],
],
I'm using Vuetify with Nuxt.js and I have chunked out my css files so that when I use npm run generate all my my styles aren't included in every page on my site. To acheive doing this, iv'e added....
build: {
extractCSS: true,
splitChunks: {
layouts: true
}
}
However my vuetify-theme-stylesheet theme files are still being included on every page. How can I get my vuetify-theme-stylesheetfiles to be chunked like the rest of my CSS?
<style data-n-head="vuetify" type="text/css" id="vuetify-theme-stylesheet" nonce="undefined">.v-application a{color:#0769ba}.v-application .primary{background-color:#0769ba!important;border-color:#0769ba!important}.v-application .primary--text{color:#0769ba!important;caret-color:#0769ba!important}
After you've extracted the contents of the <style> tag in the head to a css file, you need to adjust certain fields in your config.
In your nuxt.config.js, you need to set the theme to disabled and link the extracted vuetify css.
export default {
css: [
'./assets/vuetify.css' // the extracted vuetify css
],
vuetify: {
theme: {
disable: true
}
}
}
Now keep in mind that if you want to modify your theme (colours, etc.), you'll need to make these changes in your new css file (assets/vuetify.css)
This will also avoid a slight delay in the full css load, prevent a switch in display