I'm new to Tailwind CSS and I'm having some trouble trying to implement the CSS Grid Plugin available here: https://www.npmjs.com/package/tailwindcss-grid
I was able to run the install through Gulp and get the package in place. It is sitting in my node-modules folder. I then tried adding the plugin to my plugins code block in the tailwind.js file:
plugins: [
require('tailwindcss/plugins/container')({
// center: true,
// padding: '1rem',
}),
require('tailwindcss-grid/index.js')({
grids: [12],
gaps: {
0: '0'
},
variants: ['responsive'],
}),
require('tailwindcss-object-fit/index.js')(['responsive']),
require('tailwindcss-object-position/index.js')(['responsive'])
],
When I make changes to my css and tailwind processes the css file, it doesn't return any errors, but when I look at the CSS output, none of the utilities for the CSS frid or the object fit and position plugins are being output to the file. Like I said, I'm new to Tailwind, so can anyone tell me what I'm missing? I'm not what I'm doing wrong with the plugin import.
Nevermind. I sorted it out. I don't think it had actually processed the style sheet yet. The styles are there now though.
Related
Question:
I'd like to use a plugin (daisyUI) for TailwindCSS in one of my Svelte components. It looks like style information leaks from this component and affects the entire site. How can I avoid this?
I don't think this is related to daisyUI specifically.
Below I'm describing a minimal reproducible example based on sveltekit. But the problem is not related to sveltekit. I'm encountering this in the development of a webextension which doesn't use sveltekit. The sveltekit setup is only to make the smallest possible demonstration for this question.
To illustrate the problem, I've set up a sveltekit skeleton project, then added one single additional svelte component which uses Tailwind. When I add the plugin, the background color of my page turns from white to gray. I don't understand how this can happen, as far as I can see, I'm only using Tailwind within that component. But the style seems to leak.
Minimal example on github:
Fastest way to reproduce:
git clone git#github.com:lhk/minimum_example.git
cd minimum_example
npm install
npm run dev -- -- open
Now you can edit tailwind.config.cjs and add/remove the plugin:
plugins: [
//require("daisyui")
],
Step-by-step explanation
I'd like to use Svelte together with Tailwind and DaisyUI.
Here's a minimal project setup
# choose the skeleton project, typescript syntax and no to everything else
npm create svelte#latest minimum_example
cd minimum_example
npm install
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init tailwind.config.cjs -p
npm i --save-dev daisyui
Now edit tailwind.config.cjs:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{html,js,svelte,ts}'], theme: {
extend: {},
},
plugins: [
//require("daisyui")
],
}
Add a new Svelte component under src/components/Problem.svelte:
<p class="bg-blue-700">Using Tailwind class</p>
<style lang="postcss">
#tailwind base;
#tailwind components;
#tailwind utilities;
</style>
And include it in src/routes/+page.svelte:
<script lang="ts">
import Problem from "./../components/Problem.svelte";
</script>
<h1>Welcome to SvelteKit</h1>
<p>Visit kit.svelte.dev to read the documentation</p>
<Problem></Problem>
You can run the project with
npm run dev -- -- open
If you open the website you'll see the sveltekit skeleton app, plus one paragraph with a blue background (this is my test that Tailwind is working). Now you can uncomment the plugin in tailwind.config.cjs. The background of the page will turn gray.
I think this is a theme that somehow leaks from the Tailwind plugin to the entire site.
The way you use tailwind with svelte is quite wrong. The tldr answer is remove #tailwind directives and use #apply instead.
<p class="my-element">Using Tailwind class</p>
<style lang="postcss">
.my-element {
#apply bg-blue-700;
}
</style>
The way how svelte scopes styles is by using a unique class name alongside your custom selector, e.g. .my-element becomes .my-element.svelte-x57u2q. This also means you must use a selector so that this scoping mechanism can kick in.
But with vanilla tailwind, those builtin class names have to be global in order to be useful, in other word “leaked”. This is by design, not bug.
So if you want to use tailwind but also leverage svelte’s scoped style, #apply is the only solution.
The official doc has a section titled Using #apply with per-component CSS that reveals more technical details, I think it’s worth reading.
I've created a custom icon and imported it as SVG on my next.js app. I want to implement a feature where users can customize the color of this icon, like red to yellow or black, etc. But this is static image, is there a way I can achieve this?
There are a few possible ways to approach this:
Webpack via #svgr/webpack
Babel via babel-plugin-inline-react-svg
Next.js Image via Dangerously Allow SVG in next.config.js (Not a recommended approach)
First off, your SVG image needs to be fillable. How to do this is beyond the scope of the question, but there are many resources online to help you.
Applies to each approach below (not repeated for spacing saving)
In the file you want the SVG to show
import Star from './star.svg'
const Example = () => (
<div>
// set your color in fill and stroke is optional
<Star height="100" width="100" fill="#6973ff" stroke="black" />
</div>
)
Webpack (recommended choice)
I made a demo with this approach on Codesandbox
Snippet code pulled from react-svgr
Install yarn add --dev #svgr/webpack
In the next.config.js file add the following:
module.exports = {
webpack(config) {
config.module.rules.push({
test: /\.svg$/i,
issuer: /\.[jt]sx?$/,
use: ['#svgr/webpack'],
})
return config
},
}
Review In the file you want the SVG to show code above
Babel
Snippet code pulled from plugin repo
yarn add -D babel-plugin-inline-react-svg
Add following to your .babelrc file:
{
"plugins": [
"inline-react-svg"
]
}
Review In the file you want the SVG to show code above
Next.js Image (Not recommended)
Excerpt from Next.js as to why you shouldn't use this approach:
The default loader does not optimize SVG images for a few reasons. First, SVG is a vector format meaning it can be resized losslessly. Second, SVG has many of the same features as HTML/CSS, which can lead to vulnerabilities without proper Content Security Policy (CSP) headers.
Because of what was said from Next.js I won't be coding this example as it's redundant given the other approaches.
If you still want to follow this process you can view their documentation.
You can use the SVGR package(https://react-svgr.com/docs/next/) and convert the SVG to a React component.
And then change the fill with either the fill attribute or style prop.
According to the docs, tailwind states it supports ie11.
...yet it uses custom properties that are not supported by ie11.
We're attempting to use this in a minimal nextjs project with the following postcss.config.js:
module.exports = {
plugins: [
'postcss-import',
'tailwindcss',
'autoprefixer',
['postcss-custom-properties', { preserve: false }]
]
};
The only css file we're importing:
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
The line ['postcss-custom-properties', { preserve: false }] appears to not be doing anything. Both with the defaults and that one.
Obviously, since ie 11 doesn't support custom properties, stuff like the transform utility are completely ignored.
Anyone have any suggestions for this? I've been spending way too much time on trying to get this to work :|
I'm still experimenting which is the best value but the target attribute in your postcss.config.js is the responsible, set it to ie11 and all the custom css properties will be removed.
The target property isn't documented but I've found this issue explaining the situation. If you are using browserlist, try using
module.exports = {
target: 'browserslist',
}
Is there a way to add hash values to images that are referenced in CSS when you compile using Webpack?
I'm using React, and have separate scss files for each component file (e.g header.js & header.scss). Within some of the scss files, I have a background image. However, my server has super high caching levels, and is caching the images within the compiled css files.
What I'd like to do is, during the css compilation, add a hash value to each image reference, which would update on every build. So for example, it would compile to this:
.background-class {
background-image: url('images/my-image.jpg?0adg83af0');
}
I've tried to use the url-loader, but because these images aren't being referenced in the JS files, I don't think they're being picked up?
I ended up using a combination of PostCSS and PostCSS CacheBuster. If anyone wants to add this to their webpack setup, you need to run npm i postcss-loader postcss-cachebuster, then in your webpack.config.js, add const PostCssCacheBuster = require('postcss-cachebuster'); to the top of your file, and add the following loader config in between css-loader and sass-loader (obviously if you use this setup):
loader: 'postcss-loader',
options: {
sourceMap: true,
plugins: () => [
PostCssCacheBuster({
imagesPath: "/src/Frontend",
cssPath: "/" + distributionPath,
supportedProps: [
'background',
'background-image'
],
paramName: 'v='
})
]
}
},
I'm using a third-party module in our Vue project called vue-cal, which is for rendering a calendar. You can customise how your date cells look and such, using their custom css like this.
<style>
.vuecal--month-view .vuecal__cell-content {justify-content: flex-start;}
.vuecal__cell.selected {background-color: red;}
</style>
However, we use sass for our project, and I tried rewriting it like below but now the <style> isn't being applied at all. How can I rewrite this in sass correctly, or is there no way to rewrite external libraries' custom methods like these in non-css syntax?
<style lang="sass" scoped>
.vuecal--month-view
.vuecal__cell-content
justify-content: flex-start
.vuecal__cell.selected
background-color: red
</style>
Sorry if this is a basic question - still a beginner to Vue, CSS and front-end in general.
[EDIT] Forgot to mention an important detail. We already use sass-loader#7.1.0, and I've already written some other code in sass for other components. Those are being rendered fine. That's why I'm wondering if it has to do with vue-cal-specific methods.
You need to use vue-loader to pre-process the SASS into native CSS
Step 1:
npm install -D sass-loader sass
Step 2, in your webpack config file, make sure to have:
module.exports = {
module: {
rules: [
// ... other rules omitted
// this will apply to both plain `.scss` files
// AND `<style lang="scss">` blocks in `.vue` files
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
]
}
]
},
// plugin omitted
}
This is the barebones needed. For further information see:
vue-loader documentation
[SOLVED]
It turned out that the problem was not sass, but the fact that the style was scoped. Scoped styles are only applied to the component itself, but vue-cal is an external module so the styles weren't applied. Removing scoped immediately fixed the issue.