chrisrowe / tailwindcss-grid Goto Github PK

The end parameter is not included in the array in the lodash range function.
See: https://lodash.com/docs/#range

So range(1,12) should be range(1,13).

Consider these options

module.exports = {
    // ...

    plugins: [
        require('tailwindcss-grid')({
            grids: ['2','3','12']
        })
    ]

And this snippet from index.js

..._.range(1, _.max(grids) + 1).map(span => ({
    [`.col-span-${span}`]: {
        gridColumnStart: `span ${span}`,
    },
})),

First_.max behaves unexpectedly finding the highest number within the grids array. It returns '3' instead of the expected 12.

Here's a REPL showing the issue.

Secondly, in this situation, the plus sign in the snippet _.max(grids) + 1 acts as a string operator instead of anarithmetic operator. So the resulting expression is _.range(1, 31). So you end up with 30 .col-span-## classes.

Personally I would just convert strings to integers. Since you're already using lodash _.toSafeInteger(value) would suffice. Or throwing an error during compile time. Not sure what would be best.

Tailwind v1.2.0 adds a .grid display utility class, which results in this compiling error:

`@apply` cannot be used with .grid because .grid is included in multiple rulesets.

See original thread in tailwindlabs/discuss#438

The solution is probably to remove tailwindcss-grid, given it's now duplicated functionality, but it would be nice to be able to upgrade to Tailwind v1.2.0 without modifying a bunch of markup.