Default variant of some Tailwind class was not found

[ali4heydari]

1. default variant of some Tailwind class was not found
2. Should be able to find the default variant
3. using styled-components
4. Demo in Gitpod change twin.macro to 2.0.1

I've upgraded twin.macro package to 2.0.1 and I get error bellow.
You can see the error in this gitpod after changing twin.macro version to 2.0.0 or 2.0.1 and running

yarn && yarn build

error:

Webpack Bundle Analyzer is started at http://127.0.0.1:3001
Use Ctrl+C to close it
failed Building production JavaScript and CSS bundles - 47.089s
error undefined failed

D:\Ali\Documents\Repositories\PhpstormProjects\ali4heydari.github.io\src\components\ContactInfo\styles.ts:

✕ transition was not found

error undefined failed

D:\Ali\Documents\Repositories\PhpstormProjects\ali4heydari.github.io\src\components\ContactMeForm\index.tsx:

✕ rounded was not found

error undefined failed

D:\Ali\Documents\Repositories\PhpstormProjects\ali4heydari.github.io\src\components\Footer\MainNav\styles.ts:

✕ border-b was not found

Try one of these classes:
border-b-0 [0] / border-b-2 [2px] / border-b-4 [4px] / border-b-8 [8px] / border-b [1px]


error undefined failed

D:\Ali\Documents\Repositories\PhpstormProjects\ali4heydari.github.io\src\components\Footer\styles.ts:

✕ border-t was not found

Try one of these classes:
border-t-0 [0] / border-t-2 [2px] / border-t-4 [4px] / border-t-8 [8px] / border-t [1px]


error undefined failed

D:\Ali\Documents\Repositories\PhpstormProjects\ali4heydari.github.io\src\components\Header\Logo\styles.ts:

✕ border was not found

error undefined failed

D:\Ali\Documents\Repositories\PhpstormProjects\ali4heydari.github.io\src\components\Header\MainNav\styles.ts:

✕ border-b was not found

Try one of these classes:
border-b-0 [0] / border-b-2 [2px] / border-b-4 [4px] / border-b-8 [8px] / border-b [1px]


error undefined failed

D:\Ali\Documents\Repositories\PhpstormProjects\ali4heydari.github.io\src\components\Header\styles.ts:

✕ border-b was not found

Try one of these classes:
border-b-0 [0] / border-b-2 [2px] / border-b-4 [4px] / border-b-8 [8px] / border-b [1px]


error undefined failed

D:\Ali\Documents\Repositories\PhpstormProjects\ali4heydari.github.io\src\components\Projects\styles.ts:

✕ border was not found

error undefined failed

D:\Ali\Documents\Repositories\PhpstormProjects\ali4heydari.github.io\src\components\Testimonials\styles.tsx:

✕ rounded was not found

error undefined failed

D:\Ali\Documents\Repositories\PhpstormProjects\ali4heydari.github.io\src\components\ui\Banner\styles.ts:

✕ border-b was not found

Try one of these classes:
border-b-0 [0] / border-b-2 [2px] / border-b-4 [4px] / border-b-8 [8px] / border-b [1px]


error undefined failed

D:\Ali\Documents\Repositories\PhpstormProjects\ali4heydari.github.io\src\components\ui\Card\styles.ts:

✕ border was not found

error undefined failed

D:\Ali\Documents\Repositories\PhpstormProjects\ali4heydari.github.io\src\components\ui\Chip\styles.ts:

✕ border was not found

error undefined failed

D:\Ali\Documents\Repositories\PhpstormProjects\ali4heydari.github.io\src\components\ui\Timeline\styles.ts:

✕ border-l was not found

Try one of these classes:
border-l-0 [0] / border-l-2 [2px] / border-l-4 [4px] / border-l-8 [8px] / border-l [1px]


error undefined failed

D:\Ali\Documents\Repositories\PhpstormProjects\ali4heydari.github.io\src\templates\ProjectPost\styles.ts:

✕ border was not found

not finished Generating image thumbnails - 51.842s
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Process finished with exit code 1

[ben-rogerson]

Hey there,

Check out this change that was made in Tailwind.

You'll need to add an item with the key name of DEFAULT in order to use the default value like you're used to.

For example:

To use border:

// tailwind.config.js
borderWidth: {
      DEFAULT: "1px",
      0: "0",
      2: "2px",
      4: "4px",
      8: "8px",
},

[ali4heydari]

Thank you Ben. ❤️