Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tailwind does not build input class autoSaverSwitch from tailgrids plugin #14

Open
ynnob opened this issue Aug 21, 2024 · 0 comments
Open
Assignees

Comments

@ynnob
Copy link

ynnob commented Aug 21, 2024

hey!

I wanted to use the Slide Toggle Switch with Status Text of your Toggles.
So i added tailgrids "tailgrids": "^2.2.7" via npm and i also added it to my tailwind.config.js

I added this code into my html to test the toggle button and the button did not react to clicks. After inspecting the element i noticed that the style autoSaverSwitch and the hover styling is missing. When i copy the css inside the node_module to my input.css the output css contains the autoSaverSwitch and the toggle works like expexted.

My tailwidn build process compiles just fine. No errors. And it seems to pickup on your config becaus as soon as i remove your plugin the bg-primary can't be found so it is somewhat working.

<label
   for="autoSaver"
   class="autoSaverSwitch relative inline-flex cursor-pointer select-none items-center"
   >
<input
   type="checkbox"
   name="autoSaver"
   id="autoSaver"
   class="sr-only"
   />
<span
   class="slider mr-3 flex h-[26px] w-[50px] items-center rounded-full bg-[#CCCCCE] p-1 duration-200"
   >
<span
   class="dot h-[18px] w-[18px] rounded-full bg-white duration-200"
   ></span>
</span>
<span
   class="label flex items-center text-sm font-medium text-dark "
   >
Auto Saver <span class="on hidden pl-1"> On </span>
<span class="off pl-1"> Off </span>
</span>
</label>
/** @type {import('tailwindcss').Config} */
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
    content: [
        './Scripts/**/*.{razor,html,cshtml,js}',
        './Views/**/*.{razor,html,cshtml,js}',
        '!./node_modules',
    ],
    safelist: [
        'input-validation-error',
        'invalid-feedback',
        'toast-notification',
        'grid-rows-[0fr]',
    ],
    variants: {
        extend: {
            display: ["group-hover"],
            translate: ['group-hover', 'hover'],
        },
    },
    theme: {
        extend: {
            colors: {
                custom: {
                    // Color Definitions
                },
            },
            fontFamily: {
                'sans': ['Inter', ...defaultTheme.fontFamily.sans],
                'serif': ['Inter', ...defaultTheme.fontFamily.sans],
            },
            keyframes: {
                wiggle: {
                    '0%, 100%': { transform: 'rotate(-3deg)' },
                    '50%': { transform: 'rotate(3deg)' },
                },
                slowbounce: {
                    '33%': { top: '0px' },
                    '66%': { top: '20px' },
                    '100%': { top: '0px' },
                },
            },
        },
    },
    plugins: [
        require("tailgrids/plugin"),
    ],
}
@ynnob ynnob changed the title Tailwind does not build input class from tailgrids plugin Tailwind does not build input class autoSaverSwitch from tailgrids plugin Aug 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants