Skip to content

Instantly share code, notes, and snippets.

@joshdavenport

joshdavenport/tailwind-srcset-sizes.ts

Last active July 5, 2024 04:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save joshdavenport/3e6d7fed02fba0cf47b6f85d4e2faf40 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save joshdavenport/3e6d7fed02fba0cf47b6f85d4e2faf40 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. joshdavenport revised this gist Feb 22, 2024. 1 changed file with 14 additions and 1 deletion.
    15 changes: 14 additions & 1 deletion tailwind-srcset-sizes.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,23 @@
    /*
    The main method here is processTailwindSrcsetSizes. You can generate a sizes attribute using it based on
    tailwind style breakpointed sizes such as:
    tailwind style breakpointed sizes referencing your screens, such as:
    "100vw md:500px"
    "200px lg:100vw"
    "200px md:300px xl:600px"
    "100vw lg:50vw"
    "100vw"
    "400px"
    Your full tailwind config is resolved and screens from it used, so you can use whatever you normally use.
    Given the default tailwind screens the above becomes
    "(min-width: 768px) 500px, 100vw"
    "(min-width: 1024px), 200px"
    "(min-width: 1280px) 600px, (min-width: 768px) 300px, 200px"
    "(min-width: 1024px) 50vw, 100vw"
    "100vw"
    "400px"
    I use it in a React component by taking a sizes prop on the component, then passing that value into processTailwindSrcsetSizes
    then using that as the actual sizes attribute.
  2. joshdavenport revised this gist Feb 22, 2024. 1 changed file with 5 additions and 2 deletions.
    7 changes: 5 additions & 2 deletions tailwind-srcset-sizes.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -60,7 +60,10 @@ export function processTailwindSrcsetSizes(sizes: string) {
    }

    return convertedSizes
    .sort((a, b) => a.size - b.size)
    .map(({ size, width }) => (size === 0 ? width : `${size}w ${width}`))
    .sort((a, b) => b.size - a.size)
    .map(({ size, width }) =>
    size === 0 ? width : `(min-width: ${size}px) ${width}`,
    )
    .join(', ');
    }

  3. joshdavenport revised this gist Feb 22, 2024. 1 changed file with 5 additions and 4 deletions.
    9 changes: 5 additions & 4 deletions tailwind-srcset-sizes.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -5,6 +5,9 @@ tailwind style breakpointed sizes such as:
    "100vw md:500px"
    "200px md:300px xl:600px"
    "100vw"
    I use it in a React component by taking a sizes prop on the component, then passing that value into processTailwindSrcsetSizes
    then using that as the actual sizes attribute.
    */

    import resolveConfig from 'tailwindcss/resolveConfig';
    @@ -56,10 +59,8 @@ export function processTailwindSrcsetSizes(sizes: string) {
    return null;
    }

    const sizesAttributified = convertedSizes
    return convertedSizes
    .sort((a, b) => a.size - b.size)
    .map(({ size, width }) => (size === 0 ? width : `${size}w ${width}`))
    .join(', ');

    return sizesAttributified;
    }
    }
  4. joshdavenport created this gist Feb 22, 2024.
    65 changes: 65 additions & 0 deletions tailwind-srcset-sizes.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,65 @@
    /*
    The main method here is processTailwindSrcsetSizes. You can generate a sizes attribute using it based on
    tailwind style breakpointed sizes such as:
    "100vw md:500px"
    "200px md:300px xl:600px"
    "100vw"
    */

    import resolveConfig from 'tailwindcss/resolveConfig';
    // Resolve correctly based on your codebase
    import tailwindConfig from '@/../tailwind.config.js';

    const fullConfig = resolveConfig(tailwindConfig);

    export function isTailwindScreen(
    screen: string,
    ): screen is keyof typeof fullConfig.theme.screens {
    return screen in fullConfig.theme.screens;
    }

    export function processTailwindSrcsetSizes(sizes: string) {
    type TailwindSizesSize = {
    size: number;
    width: string;
    };

    const convertedSizes = sizes
    .split(' ')
    .map((rule) => {
    const [screenOrSoleWidth, width] = rule.split(':');

    if (screenOrSoleWidth && !width) {
    return {
    size: 0,
    width: screenOrSoleWidth,
    };
    }

    if (
    !screenOrSoleWidth ||
    !width ||
    !isTailwindScreen(screenOrSoleWidth)
    ) {
    return null;
    }

    return {
    size: parseInt(fullConfig.theme.screens[screenOrSoleWidth]),
    width: width,
    };
    })
    .filter((rule) => rule !== null) as TailwindSizesSize[];

    if (!convertedSizes.length) {
    return null;
    }

    const sizesAttributified = convertedSizes
    .sort((a, b) => a.size - b.size)
    .map(({ size, width }) => (size === 0 ? width : `${size}w ${width}`))
    .join(', ');

    return sizesAttributified;
    }