I have a React app, attempting for tailwind.macro to work within
emotion notations.
I am using customize-cra to rewire the app, and ${twWHATEVER} is successfully working.
However, it does not seem to inherit the original color themes from
tailwind and I am looking for a solution.
Here is the project:
https://github.com/minagawah/cra-ts-emotion-tailwind-solution
As described in the README, I tried
(1) using babel macro,
and (2) using PostCSS plugins.
I thought it's the backgroundSize problem
as it is discussed in
this issue, but no luck.
Here is how I use the tw macro notation in the app:
# ./src/App.tsx
import styled from '#emotion/styled';
import tw from 'tailwind.macro';
const Button = styled.button`
${tw`mt-4 p-2 text-white bg-red-600`}
`;
And it currently works
because I applied a workaround
for this.
It should apply the default tailwind color themes without the workaround I've applied.
I have been trying to figure out ways, but so far, no luck...
Please, I desperately need a help on this...
EDIT: (2019-09-22)
While I was struggling for bg-red to work, I just found out there's no such thing as bg-red by default... That was something I needed to manually add in tailwind.config.js.
Problem solved.
module.exports = {
theme: {
extend: {
colors: {
red: '#e53e3e',
},
},
},
variants: {},
plugins: [],
}
theme: {
extend: {
colors: {
red: '#e53e3e',
},
},
},
variants: {},
plugins: [],
}
i had the same issues i fixed by copying the default value from the tailwindcss github in tailwind.config.js.
here is the link to tailwindcss default value
https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js#L5
Related
How would one import the 'md' icons locally, similar to how they import the mdi ones in this post:
How to import the mdi icons module inside nuxt.config.js in Nuxt
Either the standard package or the custom repo
https://github.com/jossef/material-design-icons-iconfont
I'm using the nuxt-vuetify plugin.
All my attempts have failed, e.g adding this:
nuxt.config.js
css: ['~/assets/main.css', './node_modules/material-design-icons-iconfont/dist/material-design-icons.css'],
vuetify: {
customVariables: ['~/assets/variables.scss'],
treeShake: true,
defaultAssets: {
font: false,
icons: 'md',// this just fetches it from the repo
// icons: {iconfont: 'md'} // this doesn't seem to work for me
enter code here
},
theme: {
dark: false,
themes: {
light: {
primary: '#fec655',
},
}
}
},
I ended up solving it right after I posted it.
In the end, the settings in the original questions are correct.
One simply has to install the 'md' package from the original source or https://www.npmjs.com/package/material-design-icons-iconfont
After that, it's just a matter of changing the global CSS import.
E.g
css: ['./node_modules/material-design-icons-iconfont/dist/material-design-icons.css'],
A sidenote is that it seems to be possible to use both 'md' and 'mdi' by installing mdi/js for the treeshaken version & making imports manually.
This way, you can use the default icons for all the components but still add more icons from MDI if needed. Since the 'mdi' bundle is around 330kb while the 'md' one is only around 80kb this saves quite a lot of space.
I have weird problem.
I want use this hover-effect library (https://github.com/robin-dela/hover-effect) in my nuxt project.
This i have in my contact.vue in script tags
import hoverEffect from 'hover-effect'
export default {
mounted() {
const effect = new hoverEffect({
parent: document.querySelector('.right-section'),
intensity: 0.3,
image1: require('#/assets/images/1.jpg'),
image2: require('#/assets/images/2.jpg'),
displacementImage: require('#/assets/images/dist2.jpg'),
})
},
}
And that effect works perfectly.. BUT when i refresh the page i got this error:
SyntaxError Cannot use import statement outside a module
So i tried add this plugin into plugins/hover-effect.js
import Vue from 'vue'
import hoverEffect from 'hover-effect'
Vue.use(hoverEffect)
then in nuxt.config.js
plugins: [{ src: '~/plugins/hover-effect', mode: 'client' }],
But nothing works.. its always error: hoverEffect is not defined. I tried another 20 ways with no success. I tried this effect in normal Vue project and it works but not in nuxt.js. Can somebody help me with this?
You can configure it in the head of the page:
Page.vue
export default {
head() {
return {
script: [
{src: '../dist/hover-effect.umd.js'}
]
}
},
...
mounted() {
const effect = new hoverEffect({
parent: document.querySelector('.right-section'),
intensity: 0.3,
image1: require('#/assets/images/1.jpg'),
image2: require('#/assets/images/2.jpg'),
displacementImage: require('#/assets/images/dist2.jpg'),
})
},
modules: [
// Doc: https://axios.nuxtjs.org/usage
'#nuxtjs/axios',
// Doc: https://github.com/nuxt/content
'#nuxt/content',
'hover-effect'
],
Have you tried to add hover-effect library to modules in nuxt.config.js file? All I did was install the package and add it to the module and then have the same code as your script tag. Hope it helped you!
My project is currently Vuejs which use BootstrapVue components (seems to use bootstrap 4 css).
I am trying to use Tailwind css for new custom components.
Is it possible to use both of them at same time?
Thank you.
You can solve classes conflict using a prefix
// tailwind.config.js
module.exports = {
prefix: 'tw-',
}
BUT, most likely you will have a problem with normalize.css, which used in #tailwind base
Possible, Yes. Is it recommended, NO.
There are many classes that are gonna contradict with
each other e.g.
.container (Bootstrap)
.container (Tailwind)
.clearfix (B)
.clearfix (T)
And the list goes on...
My advice would be to either stick with BootstrapVue or Tailwind. My personal preference, Tailwind.
Option 1: Adopt or recreate classes
If you only need one or two classes, for example from the color system of Tailwind, you could also copy them.
Some characters would have to be masked, e.g:
// style.css
.hover\:text-blue-900:hover,
.text-blue-900 {
color: #183f6d;
}
That's what I did at the beginning of a project, where bootstrap is the main framework.
If it should be several colors and functions, you can also build this with SCSS quickly. In the long run, however, in my opinion, not the best and cleanest solution.
Example for this:
// style.scss
(...)
#each $name, $hexcode in $tailwind-colors {
.hover\:text-#{$name}:hover,
.text-#{$name} {
color: $hexcode
}
}
}
Full code (Github Gist)
Option 2: Integrate Tailwind
But as soon as more functionalities should be added, or you want to build it cleaner, you can do here with the prefix mentioned by the documentation as Ostap Brehin says.
// tailwind.config.js
module.exports = {
prefix: 'tw-',
}
The normalized definitions can be removed by disabling preflight:
// tailwind.config.js
module.exports = {
corePlugins: {
preflight: false,
}
}
Better check the generated CSS file.
Here is my full tailwind.config.js file:
// tailwind.config.js
module.exports = {
content: [
'./**/*.php',
'../Resources/**/*.{html,js}',
],
safelist: [
'tw-bg-blue-800/75',
{
pattern: /(bg|text)-(blue)-(800)/,
variants: ['hover'],
},
],
prefix: 'tw-',
theme: {
extend: {},
},
corePlugins: {
preflight: false,
},
plugins: [],
}
Yes, you can use Tailwind and Bootstrap together.
However, you need to do some configuration to your tailwind. The first thing is to add a prefix and then turn off the preflight. And if you are not using Tailwind JIT then also make the important as true. If you are using Tailwind JIT then you can use "!" before the class to make it important. For example "!tw-block".
Here is a suitable configuration for Tailwind JIT/CDN:
<script>
tailwind.config = {
prefix: "tw-",
corePlugins: {
preflight: false,
}
}
</script>
If you are not using CDN, use this configuration:
module.exports = {
content: ["./**/*.html"],
prefix: "tw-",
important: true,
corePlugins: {
preflight: false,
}
}
I have written a whole blog on it: https://developerwings.com/tailwind-and-bootstrap-together/
As long as there's no name collision in 2 libs (which I don't think they are), they will work just fine.
But I don't think you should. Because it will break the unification of the project and will make it harder to maintain.
Now I hava a vuepress project,
I am trying to use google analytic to track the flow of it.
But it seems there are some problem between my project and google analytic
I already follow the Document Guide(
https://vuepress.vuejs.org/plugin/official/plugin-google-analytics.html)
to use yarn add -D #vuepress/plugin-google-analytics
rather than npm install -D #vuepress/plugin-google-analytics
and also add the plugin to my config
plugins: [
'vuepress-plugin-mathjax',
{
target: 'svg',
macros: {
'*': '\\times',
},
},
'latex',
'#vuepress/google-analytics',
{
'ga': 'UA-157347770-2',
}
],
But it still nothing catch by google analytics.
Is there anyone has the same problem or similiar one before?
Thanks for anyone read
The declaration of plugin is wrong.
You have two options to declare the plugin: Babel Style or Object Style.
Babel style:
module.exports = {
plugins: [
['#vuepress/plugin-google-analytics', { ga: 'XX-000000000-0' }],
],
};
Object style:
module.exports = {
plugins: {
'#vuepress/plugin-google-analytics': {
ga: 'XX-000000000-0',
},
},
};
For more details, please see the documentation: https://vuepress.vuejs.org/plugin/using-a-plugin.html#babel-style
I am using a Nuxt.js + Vuetify.js project
Looking at the file assets/style/app.styl we have
// Import and define Vuetify color theme
// https://vuetifyjs.com/en/style/colors
#require '~vuetify/src/stylus/settings/_colors'
$theme := {
primary: $blue.darken-2
accent: $blue.accent-2
secondary: $grey.lighten-1
info: $blue.lighten-1
warning: $amber.darken-2
error: $red.accent-4
success: $green.lighten-2
}
// Import Vuetify styling
#require '~vuetify/src/stylus/main'
.page
#extend .fade-transition
The problem is, changing these theme colors does not result in any changes.
Any ideas how to solve this?
Docs not telling how to change color properly...
first of all you need to set your current theme and then config it.
I've waste 4 hours to figure this out. You need to change you config accordingly:
vuetify: {
theme: {
light: true, //you don't actually need this line as it's for default
themes: {
light: {
primary: '#b71c1c',
...
}
}
}
},
While working on this problem I figured out that you also can freely add your colors like this:
vuetify: {
theme: {
themes: {
light: {
'custom-color-one': '#b71c1c',
'custom-color-two': '#3B8070',
...
}
}
}
},
and then in your HTML:
<div class='custom-color-one'>
I'am div with custom background color!
</div>
<div class='custom-color-one--text'>
I'am div with custom text color!
</div>
Not sure, but try this maybe, depends how vuetify is included, but I presume if you used vuetify nuxt template then you need to include it in your nuxt.config.js file.
If you included vuetify like so:
modules: [
'#nuxtjs/vuetify'
Then add theme like so:
module.exports = {
modules: [
'#nuxtjs/vuetify'
// ...
]
// Add the following:
vuetify: {
theme: {
secondary: '#ff0000'
// ...
}
},
NOTE: This solution isn't the best approach, and will not work in a production environment. It works for workflows where a static site is deployed (i.e. when you run yarn build and deploy that), since changes in node_modules aren't persistent across installs.
Two files govern this - nuxt.config.js and node_modules/vuetify/es5/colors.js.
You need to open nuxt.config.js, and head over to the vuetify property. The themes property under the vuetify: {...} section lets you map the class names to configured color variables.
Further, to change the values of the colour variables, modify the file node_modules/vuetify/es5/colors.js. Here, you define any colors you need to whatever hex color code you want.