Skip to content

Latest commit

 

History

History
194 lines (144 loc) · 9.16 KB

README.md

File metadata and controls

194 lines (144 loc) · 9.16 KB
Raw

Supernova Logo

Supernova is a design system platform that manages your assets, tokens, components and allows you to write spectacular documentations for your entire teams. And because you found your way here, you are probably interested in its most advanced functionality - automatic hand-off of design and development assets, tokens and data in general. To learn everything Supernova, please check out our developer documentation.

Tailwind Exporter

This Tailwind exporter is an extension to the CSS exporter. It generates an additional file, tailwind-variables.js that contains the css variables as a js object, in order to import them directly into your Tailwind config.

How to import your variables into your Tailwind config - Example :

Here is a project architecture example :

# Project architecture example

app
├── styles
│   └── designsystem # Output folder of the exporter
│       ├── colors.css
│       ├── # Other
│       ├── # css
│       ├── # files...
│       └── tailwind-variables.js
└── tailwind.config.js

The idea is to import tailwind-variables.js in tailwind.config.js

/* app/styles/designsystem/colors.css */
/* This file is automatically generated by the tailwind exporter */

:root {  
    --color-primary-dark2: #1c7a44;
    --color-primary-dark1: #25a35a;
    --color-primary-main: #2ecc71;
    --color-primary-light1: #6ddb9c;
    --color-primary-light2: #abebc6;
    --color-primary-light3: #d5f5e3;
    --color-primary-border: #29b866;
    --color-secondary-dark2: #0e4290;
    --color-secondary-dark1: #1358c0;
    --color-secondary-main: #186ef0;
    --color-secondary-light1: #5d9af5;
    --color-secondary-light2: #a3c5f9;
    --color-secondary-light3: #d1e2fc;
    --color-secondary-border: #1663d8;
}
// app/styles/designsystem/tailwind-variables.js
// This file is automatically generated by the tailwind exporter

module.exports = {
    'colors': {
        'primary': {
            'dark2': 'var(--color-primary-dark2)', 
            'dark1': 'var(--color-primary-dark1)', 
            'DEFAULT': 'var(--color-primary-main)', 
            'light1': 'var(--color-primary-light1)', 
            'light2': 'var(--color-primary-light2)', 
            'light3': 'var(--color-primary-light3)', 
            'border': 'var(--color-primary-border)', 
        },
        'secondary': {
            'border': 'var(--color-secondary-border)', 
            'dark2': 'var(--color-secondary-dark2)', 
            'dark1': 'var(--color-secondary-dark1)', 
            'DEFAULT': 'var(--color-secondary-main)', 
            'light1': 'var(--color-secondary-light1)', 
            'light2': 'var(--color-secondary-light2)', 
            'light3': 'var(--color-secondary-light3)', 
        },
    }
}
// app/tailwind.config.js

const designSystemVariables = require('./styles/designsystem/tailwind-variables'); // Add this line

module.exports = {
    purge: [],
    darkMode: false,
    theme: {
        extend: designSystemVariables, // Add this line to extend tailwind theme with your design system
    },
    variants: {
        extend: {},
    },
    plugins: [],
}

That's it ! You can now use the Tailwind variables in your templates :

<section class="container mx-auto mt-24">

    <h1 class="text-2xl text-primary">Supernova x Tailwind exporter x Tailwind</h1>
    <p class="text-secondary mt-2">Importing your design system</p>
    <ul class="flex mt-2 text-white">
        <li class="p-2 mr-3 rounded bg-primary-dark2">Dark 2</li>
        <li class="p-2 mr-3 rounded bg-primary-dark1">Dark 1</li>
        <li class="p-2 mr-3 rounded bg-primary">Main</li>
        <li class="p-2 mr-3 rounded bg-primary-light1">Light 1</li>
        <li class="p-2 mr-3 rounded bg-primary-light2">Light 2</li>
        <li class="p-2 mr-3 rounded bg-primary-light3">Light 3</li>
    </ul>

</section>

Result example

Tokens supported by Tailwind exporter :

  • Color definitions
  • Text Styles
  • Gradients
  • Shadows
  • Borders
  • Radii
  • Measures

You can generate all production ready-code either manually using Supernova's VS Code extension, or automate your code delivery pipeline using Supernova Design Continuous Delivery.

Installing

In order to make the Supernova Tailwind exporter available for your organization so you can start generating code from your design system, please follow the installation guide in our developer documentation.

Reporting Bugs or Requesting Features

In order to faciliate easy communication and speed up delivery of fixes and features for this exporter, we require everyone to log all issues and feature requests through the issue tracking of this repository.

Please read through the existing issues before you open a new issue! It might be that we have already discussed it before. If you are sure your request wasn't mentioned just yet, proceed to open a new issue and fill in the required information. Thank you!

Contributing

If you have an idea for improving this exporter package or want a specific issue fixed quickly, we would love to see you contribute to its development!

There are multiple ways you can contribute, so we have written a contribution guide that will walk your through the process. Any pull requests to this repository are very welcome.

Would love to help us build more but maybe need a little bit of support? Join our community and drop us a message, we will support any of your wild ideas!

License

This exporter is distributed under the MIT license. We absolutely encourage you to clone it and modify it for your purposes, so it fits the requirements of your stack. If you see that you have created something amazing in the process that others would benefit from, we strongly recommend you consider publishing it back to the community as well.

Useful Links

  • To learn more about Supernova, go visit our website
  • To join our community of fellow developers where we try to push what is possible with design systems and code automation, join our community discord
  • To understand everything you can do with Supernova and how much time and resources it can save you, go read our product documentation
  • Finally, to learn everything about what exporters are and how you can integrate with your codebase, go read our developer documentation

Supernova Maintained Exporters

We are developing and maintaining exporters for many major technologies. Here are all the official exporters maintained by Supernova:

Additionally, you can also use asset exporters for all major targets, enjoy!:

To browse all exporters created by our amazing community, please visit the Supernova Exporter Store.