Skip to content

A babel plugin version of Styled wind, to reduce bundle size and at same time get all benefits

License

Notifications You must be signed in to change notification settings

product-ride/babel-plugin-styled-wind

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

babel-plugin-styled-wind

This plugin is a highly recommended supplement to the base styled-wind library, offering some useful features:

  • Use tailwind classnames in styled-components without using any additional dependencies
  • Supports all features of styled-wind, but with no additional bundle size
  • It works independently and doesnt require installing styled-wind

Note: For testing/playing around the tool, use the actual library. Use the babel-pligin-styled-wind only for production to avoid unnecssary configurations. If you are using create-react-app, you should eject before using it.

Quick start

Install the plugin first:

npm install --save-dev babel-plugin-styled-wind

or 

yarn add -D babel-plugin-styled-wind

Then add it to your babel configuration:

{
  "plugins": ["babel-plugin-styled-wind"]
}

Custom themeing

The configurations works very similar to tailwindcss with few exceptions. Details about configuring or extending the default theme object can be found here

  • Create a file styled-wind.js in the root of your project and add custom styles in it. A sample implementation:
// styled-wind.js
module.exports = {
    theme: {
        extend: {
            colors: {
                cyan: '#9cdbff'
            },
        }
    }
}

Documentation

More detailed documentation for styled-wind lives on the styled-wind website!

License

Licensed under the MIT License, Copyright © 2020-present Vilva Athiban and Ameer Jhan.

See LICENSE.md for more information.

About

A babel plugin version of Styled wind, to reduce bundle size and at same time get all benefits

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published