Documentation

[Larsklopstra]

Explain the

• Installation process
• Customization options
• Examples of both filters and backdrop filters
• Available classes

in the README.md section.

Do a spellcheck (in Grammarly for example) to make sure it doesn't contain any mistakes.

[roygrv21]

@Larsklopstra Can I work on this issue?

[Larsklopstra]

@Larsklopstra Can I work on this issue?

Sure :)

[yeltsinxyz]

@Larsklopstra Hey, if the issue isn't solved, I can help with, since I am using your plugin on my tailwind :)

[Larsklopstra]

@yeltsinxyz, please. That'd be awesome 😄

[yeltsinxyz]

I've just one question. Inside "Default values and available filters", you use this code;

const filters = [
  {
    name: 'blur',
    theme: {
      2: '2px',
      4: '4px',
      8: '8px',
      16: '16px',
      32: '32px',
      64: '64px',
    },
  },
  {
    name: 'brightness',
    theme: {
      0: '0',
      '1/4': '0.25',
      '1/2': '0.5',
      '3/4': '0.75',
      1: '1',
    },
  },
  {
    name: 'contrast',
    theme: {
      0: '0',
      '1/4': '0.25',
      '1/2': '0.5',
      '3/4': '0.75',
      1: '1',
    },
  },
  {
    name: 'dropShadow',
    theme: {
      sm: '0 1px 2px rgba(0, 0, 0, 0.05)',
      default: '0 1px 3px rgba(0, 0, 0, 0.1)',
      md: '0 4px 6px rgba(0, 0, 0, 0.1)',
      lg: '0 10px 15px rgba(0, 0, 0, 0.1)',
      xl: '0 20px 25px rgba(0, 0, 0, 0.1)',
      '2xl': '0 25px 50px rgba(0, 0, 0, 0.25)',
    },
  },
  {
    name: 'grayscale',
    theme: {
      0: '0%',
      '1/4': '0.25',
      '1/2': '0.5',
      '3/4': '0.75',
      1: '1',
    },
  },
  {
    name: 'hueRotate',
    theme: {
      0: '0deg',
      60: '60deg',
      90: '90deg',
      120: '120deg',
      150: '150deg',
      180: '180deg',
      210: '210deg',
      240: '240deg',
      270: '270deg',
      300: '300deg',
      330: '330deg',
    },
  },
]

The correct placement of this piece of code is here?

module.exports = {
  theme: {
    extend: {
      name: 'blur',
      theme: {
        2: '2px',
        4: '4px',
        8: '8px',
        16: '16px',
        32: '32px',
        64: '64px',
      },
    },
  },
  plugins: [
    require('tailwindcss-css-filters'),
  ],
}

Can you provide me a better example? Because I often use plugins with default code, so my tailwind.config.js is often very sad and simple haha (this is the tailwind config from my current project):

module.exports = {
  future: {
    // removeDeprecatedGapUtilities: true,
    // purgeLayersByDefault: true,
  },
  purge: [
    '*.php',
    '/lib/php/*.php'
  ],
  theme: {
    fontFamily: {
      sans: ['Manrope', 'sans-serif'],
      serif: ['Manrope', 'sans-serif'],
      mono: ['Manrope', 'sans-serif'],
    },
    extend: {},
  },
  variants: {
    mixBlendMode: ['responsive'],
    backgroundBlendMode: ['responsive'],
    isolation: ['responsive'],
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('tailwindcss-blend-mode')(),
    require('tailwindcss-css-filters'),
    require('tailwindcss-skip-link')(),
    require("kutty")
  ],
}

[Larsklopstra]

@yeltsinxyz, the placement is correct. It's just a copy & paste so you can see all available classes. What for an example do you need? Yours look good to me

[yeltsinxyz]

@Larsklopstra Yeah I got a little bit confused with the const but I'm sending a PR. I added three new files: ISSUE-TEMPLATE, PULL-REQUEST-TEMPLATE and I also translated the README to Portuguese [BR] 😄 If you want just the README.md I can create a new PR.