Oombla DocsMenuoombla.com

Tailwind

The base template for exporting assets for the TailwindCSS framework

The base Tailwind template creates utility classes for each asset in the form of a Tailwind plugin which can be imported directly into a Tailwind project. When the plugin is added, the assets classes become available via Tailwind’s @tailwind utilities; directive. The final file is JavaScript, but each asset’s SVG code, minified SVG code and base64 code can be viewed in the preview manifest before downloading.

First we’ll go over the template, and then an example of how to integrate it into a typical Tailwind project.

Template

Here is the default template for TailwindCSS:

const plugin = require('tailwindcss/plugin')

module.exports = plugin(function({ addUtilities }) {
  const newUtilities = {<% data.map((item, index) => { %>
    '.asset-<%= item.name %>': {
      display: 'inline-block',
      width: '<%= item.width %>px',
      height: '<%= item.height %>px',
      backgroundImage: `url("data:image/svg+xml,<%= item.svgMini %>")`,
      backgroundPosition: 'center',
      backgroundRepeat: 'no-repeat',
      backgroundSize: '<%= item.width %>px <%= item.height %>px'
    },
    '.bg-asset-<%= item.name %>': {
      backgroundImage: `url("data:image/svg+xml,<%= item.svgMini %>")`,
      backgroundPosition: '0% 0%',
      backgroundRepeat: 'no-repeat',
      backgroundSize: '<%= item.width %>px <%= item.height %>px'
    }<%= (index < data.length - 1) ? ',' : '' %>
  <% }) %>}

  addUtilities(newUtilities)
})

A Tailwind plugin is a JavaScript file, hence the odd CSS syntax. What this plugin does is add two classes for each asset to the list of utility classes. The first .asset-<name> is meant to be a class that would allow you to use the asset as a standalone entity. E.g. <span class="asset-<name>"></span> The second .bg-asset-<name> is for when you want to use an icon as a background image in another element, say for example a section header that you want to add an icon to.

You can have as many classes here as you want; these are just the two I have as a starter. See Tailwind’s documentation for more information on how to write styles for Tailwind plugins.

Tailwind Project Integration

The Figma plugin generates a single JavaScript file with all of the assets in the file. Once you have downloaded this file, add it to your Tailwind project wherever you store your plugins and import it in the main Tailwind config file.

For example, let’s say this is the structure of your Tailwind project:

tailwind-proj/
├─ plugins/
|  └─ assets.js (generated file from Export Code)
├─ main.css
├─ postcss.config.js
└─ tailwind.config.js

In main.css make sure Tailwind’s Utilities are called:

@tailwind base;
@tailwind utilities;

The postcss.config.js file would have a normal configuration.

And then in tailwind.config.js we load the plugin assets.js with require and add it to the plugins array to bring the asset classes into the project.

const pluginAssets = require('./plugins/assets.js')

module.exports = {
  plugins: [
    pluginAssets
  ]
}

The last step would be to configure the purge option in the Tailwind config file to remove any unused asset classes from the final production CSS.