I have a gatsby project that uses .less as the CSS preprocessor, adding tailwind to it as shown in the docs does nothing
#tailwind base
#tailwind utilities
#tailwind components
How can I add tailwind to a .less file ?
in less can import tailwind as css files you can try it
#import "~tailwindcss/base.css";
#import "~tailwindcss/components.css";
#import "~tailwindcss/utilities.css";
If you are using tailwind with react, add
#tailwind base
#tailwind utilities
#tailwind components
to ./src/index.css file
refer: https://tailwindcss.com/docs/guides/create-react-app
Related
I'm trying to have an efficient way to re-use image-rendering: -webkit-optimize-contrast in different components in my Vue app. I don't want to create it as a <style scoped> and declare it in each component.
The only resource I could find about it is from Tailwind docs: Link.
I tried downloading autoprefixer, and I Inserted the plugin as required:
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
]
}
I can't figure out how to include the webkit in my tailwind config.
I tried adding it to my theme, but I couldn't make it work. I'm not sure if I was correct with my approach:
theme: {
extend: {
webkit: {
'image-rendering': '-webkit-optimize-contrast'
}
}
}
How do I include image-rendering: -webkit-optimize-contrast in my tailwind.config.js and use it as a class?
Solution:
Found a solution in Tailwind Docs (adding-custom-styles).
Add your custom CSS styling inside your CSS file (e.g. tailwind.css).
Tailwind docs suggest wrapping your custom styles inside #layer <layer-name> { /* css here */ }, where <layer-name> can be base, components, etc.
Thank you #tao for pointing it out.
tailwind.css:
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer components {
.disable-blur{
image-rendering: -webkit-optimize-contrast;
}
}
No need to install autoprefixer.
I use Primevue on a vue.js project, with the theme Deep Purple that I import this way:
import 'primevue/resources/themes/mdc-light-deeppurple/theme.css';
Now I'd just like to modify the primary color set in the theme (#673AB7) by a custom one.
How can I do this ?
I copied the primevue theme .css file to src/assets/_theme.scss (note .scss).
Then in App.vue, instead of importing the vue theme, import _theme.scss
<style lang="scss">
#import './assets/_theme.scss'; // copied from '~primevue/resources/themes/nova/theme.css'
#import '~primevue/resources/primevue.min.css'; //core css
#import '~primeicons/primeicons.css'; //icons
...
Next, in _theme.scss, search and replace all values of the current primary-color hex code with $primary-color. This should make a bunch of replacements.
Then just set a new $primary-color variable at the top of the file.
//_theme.scss
$primary-color: #000;
If you want to define all your scss variables in a single file and make them available to every vue component without needing to #import them explicitly, then create/add the following to vue.config.js in your project root.
module.exports = {
css: {
loaderOptions: {
scss: {
prependData: `#import "#/assets/_variables.scss";`
}
}
}
};
We have a pretty standard Vue CLI environment. It currently ingests a vue plugin we created via the install method. The plugin is also a Vue CLI environment and lives as a git submodule in the repo.
Currently the parent uses sass and sass-loader packages to transpile. It's configured in the vue.config.js settings, like so:
module.exports = {
// Other properties and settings removed to simplify
css: {
loaderOptions: {
sass: {
data: `
#import "#/styles/global.scss";
`
}
}
}
The global.scss just houses all our style includes.
The plugin is set up in a similar way, but none of the code is getting ingested into the parent. Which totally makes sense, as there is nothing importing/building the plugins style files. Anyone know how to import and transpile plugin sass style sheets? Thank you!
I'm using Vue-cli3.x, which is a multiple-pages project. I'm using SCSS in this project and separating the global basic styles with loaderOptions as following:
The styles relations like this: basic styles ---> components' styles ---> pages' styles
But after I building my project, I found my CSS files include basic styles more than once.
EX: dashboardAirLeft page includes chunk-common.css and dashboardAirLeft.css, however in chunk-common.css and dashboardAirLeft.css all have normalize.scss code, like following:
And my production's Webpack config like this:
My destination is to separate the common code from my page-name css file
Using loaderOptions data property means that the files you import will be imported into every single components <style> tag. So each page-name css file will also import all three of the scss files you've defined. Instead, you probably want to import the common scss files only once in the App.vue component (or main entrypoint):
App.vue
<template>...</template>
<script>...</script>
<style lang="scss">
#import "#/assets/styles/scss/normalize.scss"
#import "#/assets/styles/scss/base-style.scss"
</style>
However, you do want the variables-custom.scss file imported into each page though so that you have access to your scss variables in each component. So you should leave only variables-custom.scss in your loaderOptions:
vue.config.js
css: {
loaderOptions: {
sass: {
data: "#import '#/assets/styles/scss/variables-custom.scss'"
}
}
}
I'm starting a new project using the Vue CLI, and this is my first time using it.
I'm using a CSS framework (Spectre), which I installed via NPM. I'm now trying to import only parts of it. I have found a way to get it to work, but it's quite cumbersome, and I'd like to find a better way using the includePaths option.
Basically, the whole thing can be summarized like this: I have a *.scss file that looks like this:
#import "./node_modules/spectre.css/src/accordions";
#import "./node_modules/spectre.css/src/avatars";
#import "./node_modules/spectre.css/src/badges";
#import "./node_modules/spectre.css/src/breadcrumbs";
...
and I obviously want to simplify it by removing the ./node_modules/spectre.css/src/ part from all the imports.
In vue.config.js, here's what I have:
module.exports = {
css: {
loaderOptions: {
sass: {
includePaths: [path.resolve(__dirname, 'node_modules/spectre.css/src')]
} } } }
But that doesn't work.
I've looked at the following questions:
How to #import external SCSS properly with webpack and Vue.js?
Webpack-simple + vue-cli with SASS - Can't compile?
Using sass-resources-loader with vue-cli v3.x
But couldn't find an answer, or couldn't figure it out.
The URL transform rules of Vue CLI projects allow using ~ as a path alias into the project's node_modules/, so you could do:
#import "~spectre.css/src/accordions";
#import "~spectre.css/src/avatars";
#import "~spectre.css/src/badges";
#import "~spectre.css/src/breadcrumbs";
No changes to your Vue config is needed.