So I'm trying to enable darkmode on my site. I've added a toggle to my app.layouts file which adds and removes the dark class to the element at the root of my file and toggling the checkbox adds and removes this class.
I have added darkMode: 'class', to the top of my tailwind.config.js file (right below module.exports = {
I have ran npm run dev and npm run dev watch and Ive cleared my caches (i have this in a route for convenience at the moment)
my page has a div which contains a background colour and one when in dark mode
<div class="w-full text-center bg-blue-300 dark:bg-blue-600">34</div>
tailwind is loading and the region is being shown with the bg-blue-300 colour shown but when i toggle to dark mode nothing changes except the class of dark is added to my <html> element like this <html class="dark" lang="en">. I have checked the docs and can't see any step I have missed.
I followed this tut https://www.section.io/engineering-education/implementing-dark-mode-using-tailwind-css/
my plan is to switch the tailwind config setting from class to media and remove the toggle button once I know it will work.
** EDIT **
thanks to #lordisp it seems that the underlying functionality is working but the classes in the css are not present. I guess I could add a full minified tailwind.css file but would rather just compile the assets I need.
So looking in my tailwind.config.js file i have the following in the content section
ontent: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./vendor/wire-elements/modal/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],
So it looks like the livewire components are getting loaded so they should have the css added right?
Add your dark-mode classes to Safelisting classes in your tailwind.config.js:
module.exports = {
darkMode: 'class',
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./vendor/wire-elements/modal/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],
safelist: [
'bg-blue-300',
'bg-blue-600',
],
// ...
}
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 am trying to build a blogging platform and i need to use a text editor and i have considered CKeditor and TinyMCE but there is no video or good instruction on how to use it with NuxtJS.
If anyone can help me it will be appreciated.
Please do not use a CDN but rather the solution that is here.
With something like this
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<editor
api-key="no-api-key"
:init="{
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar:
'undo redo | formatselect | bold italic backcolor | \
alignleft aligncenter alignright alignjustify | \
bullist numlist outdent indent | removeformat | help'
}"
/>
</div>
</template>
<script>
import Editor from '#tinymce/tinymce-vue'
export default {
name: 'app',
components: {
'editor': Editor
}
}
</script>
Tinymce and CKeditor both have NPM packages and CDNs. This means you have two ways of using them in a Nuxt app.
Including the package via script tag (CDN)
As stated in the "Getting started" guide of those packages, you can simply import them using a script tag. In Nuxt, you can do this by adding it to your nuxt.config.js head option.
// nuxt.config.js
[...]
head: {
scripts: [
{ src: "https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js", referrerpolicy: true }
]
},
[...]
// example.vue
[...]
mounted() {
tinymce.init()
}
[...]
Using this solution you have to pay attention that tinymce is only accessed on the client-side, as it will not be available on the server-side.
Adding the package as a plugin
This is usually preferable, as it helps with bundle size analysis and allows your package manager to manage the text editors version.
You can also add the respective package as a plugin. Install the package using npm or yarn.
npm i tinymce
Afterward, simply create a .js-file in the plugins directory like so:
// plugins/tinymce.js
import tinymce from "tinymce"
export default tinymce
Register the plugin in your nuxt.config.js
// nuxt.config.js
plugins: [
{
src: "~/plugins/tinymce.js",
mode: "client", // This way the plugin will only be initiated on the client side
}
]
Now you can use the plugin within your app, accessing tinymce, just like in example.vue above.
Dynamically import the package within individual components
Another option is importing the npm package in the component directly. This may improve performance as the package is only imported when it is needed. If the package supports SSR, you can simply import it like you would any other package at the top of the script tag.
If your package does not support SSR (like most text editors), you can import it dynamically after checking whether the process is running on the client-side or by only importing it within hooks or methods that run on the client-side exclusively. (Solution by #kissu)
See this question for dynamic imports: How to make a dynamic import in Nuxt?
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.
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