Looking for a sleek dotted background effect in Tailwind CSS? Our guide showcases how to create a stunning dot BG with a dotted diagonal background using Tailwind's utility classes. Whether you're designing a modern website or enhancing your UI, this technique offers a lightweight and visually appealing solution.
Explore our dot background demo and learn how to implement it effortlessly in your Tailwind CSS projects. Perfect for adding subtle textures and stylish patterns to your web designs!
1const svgToDataUri = require("mini-svg-data-uri");
2
3const {
4 default: flattenColorPalette,
5} = require("tailwindcss/lib/util/flattenColorPalette");
6
7/** @type {import('tailwindcss').Config} */
8module.exports = {
9 content: ["./src/**/*.{ts,tsx}"],
10 darkMode: "class",
11 plugins: [
12 function ({ matchUtilities, theme }) {
13 matchUtilities(
14 {
15 "bg-diagonal-lines": (value) => ({
16 backgroundImage: `url("${svgToDataUri(
17 `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" width="300" height="300" fill="none">
18 <path d="M-0 0L300 300" fill="none" stroke="${value}" stroke-width="1" stroke-dasharray="3 3" />
19 </svg>`
20 )}")"`,
21 }),
22 },
23 { values: flattenColorPalette(theme("backgroundColor")), type: "color" }
24 );
25 },
26 ],
27};