Adds Tailwind CSS to your app or addon
Clone or download
Latest commit 7f0dd60 Nov 14, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
addon Fix inclusion order (#56) Sep 27, 2018
app Add a js file for the etw/module-section component Nov 6, 2018
blueprints/ember-cli-tailwind Update tailwindcss to v0.6.1 Jul 3, 2018
config buildTarget should come from immediate parent (#53) Aug 28, 2018
fastboot-tests Fix Fastboot issue Feb 22, 2018
lib Cache tailwind re-builds using broccoli-caching-writer Oct 31, 2018
node-tests buildTarget should come from immediate parent (#53) Aug 28, 2018
scripts Fix inclusion order (#56) Sep 27, 2018
test-projects Expose build-tailwind function Sep 28, 2018
tests Fix inclusion order (#56) Sep 27, 2018
vendor Adds a /tailwind styleguide route Feb 19, 2018
.editorconfig Initial Commit from Ember CLI v2.18.0 Jan 29, 2018
.ember-cli Initial Commit from Ember CLI v2.18.0 Jan 29, 2018
.eslintignore buildTarget should come from immediate parent (#53) Aug 28, 2018
.eslintrc.js buildTarget should come from immediate parent (#53) Aug 28, 2018
.gitignore Fix inclusion order (#56) Sep 27, 2018
.npmignore Fix inclusion order (#56) Sep 27, 2018
.travis.yml Update travis Aug 28, 2018
.watchmanconfig Initial Commit from Ember CLI v2.18.0 Jan 29, 2018
CHANGELOG.md Update changelog Apr 7, 2018
LICENSE.md Initial Commit from Ember CLI v2.18.0 Jan 29, 2018
README.md Add missing `require` to docs Oct 11, 2018
bin buildTarget should come from immediate parent (#53) Aug 28, 2018
ember-cli-build.js buildTarget should come from immediate parent (#53) Aug 28, 2018
index.js Expose build-tailwind function Sep 28, 2018
package.json v0.6.3 Nov 14, 2018
testem.js buildTarget should come from immediate parent (#53) Aug 28, 2018
yarn.lock Cache tailwind re-builds using broccoli-caching-writer Oct 31, 2018

README.md

Ember CLI Tailwind

npm version Build Status

Ember CLI Tailwind adds Tailwind CSS to your app or addon. It also lets you configure every aspect of Tailwind that's designed to be configured, from the configuration values driving the utility classes, to defining new utility classes or components.

It comes with a styleguide route (/tailwind) that displays all your configured styles:

image

Installation

Install the addon with

ember install ember-cli-tailwind

Apps

The default blueprint will attempt to modify your application's main style file and add an @import line to include Tailwind, but if it doesn't, you can add it manually:

# CSS 
@import 'tailwind.css';

# SCSS
@import 'tailwind';

# Less 
@import (inline) 'tailwind.css';

Addons

Make sure ember-cli-tailwind is in your addon's dependences (NOT devDependencies).

Usage

Once installed, all of Tailwind's classes should be available to you.

You can see the default values, and change them, by looking at the generated files under /app/tailwind.

Styleguide

If you serve your Ember app and visit /tailwind, you should see a styleguide showing a summary of all your configured classes. It will rebuild as you modify Tailwind's default configuration.

Utilities

You can add new utilities of your own by adding them to files under /app/tailwind/utilities. You can either use one file or one per utility.

// app/tailwind/utilities/outline-none.css
.outline-none {
  outline: none;
}

The file will get automatically added to your build, and in the right order (so it will override other rules as you'd expect).

Components

You can define Tailwind components by adding files under app/tailwind/components.

// app/tailwind/components/buttons.css
.btn-blue {
  @apply .bg-blue .text-white .font-bold .py-2 .px-4 .rounded;
}
.btn-blue:hover {
  @apply .bg-blue-dark;
}

Files added here will automatically be added to your build.

Plugins

You can add Tailwind plugins by using the app/tailwind/config/tailwind.js file, importing your plugin, and adding it to the plugins array:

import myPlugin from 'some-neat-plugin';

// snip

plugins: [
  container({
    // center: true,
    // padding: '1rem',
  }),
  myPlugin(),
],

Configuration

shouldIncludeStyleguide

Ember CLI Tailwind ships with a styleguide that can be added to the host application's router at the /tailwind URL.

The config option ENV['ember-cli-tailwind'].shouldIncludeStyleguide determines whether this styleguide is included. By default, it is false in the production environment, and true otherwise.

You can overwrite it to change this default behavior.

Advanced addon usage

build-tailwind and the shouldBuildTailwind option

Ember CLI Tailwind comes with a function you can use when you want more control over how to work with the built tailwind.css file.

The function is in the lib directory and can be require'd in node:

const buildTailwind = require('ember-cli-tailwind/lib/build-tailwind');

To use the function, pass in your addon instance (usually this if you're working in a hook in index.js):

let tailwind = buildTailwind(this);

The return value is a Broccoli tree, and thus can be used in different treeFor hooks to end up in your build.

If you're using this, you probably also want to disable Ember CLI Tailwind's default behavior, which will concat the built tailwind.css file into your addon's generated vendor.css file – otherwise you could end up with two versions of Tailwind in your CSS.

You can do that using the shouldBuildTailwind config option:

// index.js
module.exports = {
  name: 'your-addon',
  
  options: {
    'ember-cli-tailwind': {
      shouldBuildTailwind: false
    }
  }
}

Now you are responsible for calling buildTailwind and ensuring the resulting tree ends up in your output.

As an example of how you might use this, say you're building a UI component library as an Ember Addon. You want your component library to use Ember CLI Tailwind, but you're using Sass, and you'd like to explicitly @import the built tailwind.css file in your component library so that you can write other CSS classes that @extend Tailwind's classes.

Here's what that would look like:

// index.js
const MergeTrees = require('broccoli-merge-trees');
const buildTailwind = require('ember-cli-tailwind/lib/build-tailwind');

module.exports = {
  name: 'your-addon',
  
  config() {
    return {
      'ember-cli-tailwind': {
        shouldBuildTailwind: false
      }
    };
  },

  treeForAddonStyles(tree) {
    let trees = tree ? [ tree ] : [];
  
    trees.push(buildTailwind(this));
  
    return new MergeTrees(trees);
  }
};

Now that the built tailwind.css file is in your Addon's style tree, you can import it in other Sass files:

// addon/styles/addon.scss
@import 'tailwind';

body {
  @extend .antialiased;
  @extend .font-sans;
  @extend .text-grey-darkest;
}

You could even use Sass variables inside of Tailwind's config, since you can set those variables before @import'ing Tailwind:

// tailwind/config/colors.js

export default {
  brand: '$brand'
}
$brand: '#3490DC';
@import 'tailwind';