Hey,

first off I want to thank you, this is a great project.

I tried to include it in our project (wich is not open source) and it did not work. Not even the styleguide is styled, so the styles do not seem to get included. I changed nothing in the config, only included the plugin with compile target 'app'.

How can I debug this? I already looked in the assets/vendor.css and there are not tailwind classes at all.

In our app we prefix all our tailwind styles with tw- using the prefix option. However, the awesome styleguide ember-cli-tailwind generates doesn't show our styles because it's missing the prefix.

Noticed this addon is still using tailwind v0.4 and latest is currently v0.5.2. There's quite a few changes in that v0.5 release, but if there's interest I can help with bringing that up to date.

I get the following build error even in a brand new Ember CLI app:

Could not load tailwindcss/plugins/container (imported by /Users/smackesey/stm/code/apps/ember/stmpd/tmp/rollup-cache_path-v3by5pPQ.tmp/build/config/tailwind.js): ENOENT: no such file or directory, open 'tailwindcss/plugins/container'

Also, my custom components and utilities are not available, and don't seem to be showing up in the dist/assets/tailwind.css directory.

It appears that changes related to #24 may have introduced a build error.

This can be reproduced with the following steps:

• generate a new app via ember new
• install the latest changes from master via ember i https://github.com/embermap/ember-cli-tailwind#master
• run the addon's blueprint via ember g ember-cli-tailwind
• run the development server via ember s and observe the following error:

 - broccoliBuilderErrorStack: TypeError: e-test/tailwind/config/tailwind.js: Property callee of CallExpression expected node to be of a type ["Expression"] but instead got null

This was tested with the following versions:

❯ ember -v                                                                                                                                           ✗ master
ember-cli: 3.1.4
node: 9.3.0
os: darwin x64

It's unclear to me what the specific issue is here but I am noticing the following line appears to be causing trouble:

https://github.com/embermap/ember-cli-tailwind/pull/24/files#diff-1c826c5a208d7289f7efbca979da9db7R123

@jpadilla do you have any thoughts here?

#28 (comment)

Would it be a good idea to check for an existing @charset "UTF-8"; line in app.css or app.scss before inserting @import 'tailwind.css'; or @import 'tailwind';?

From MDN:

The @charset CSS at-rule specifies the character encoding used in the style sheet. It must be the first element in the style sheet and not be preceded by any character;

When creating a new project I found that there is an error

'tailwindcss/plugins/container' is imported by ../../../../../../var/folders/64/0sk2_z6n3js7b93cj47tlpxw0000gn/T/broccoli-90368eONv5LidytFA/cache-003-rollup/build/config/tailwind.js, but could not be resolved – treating it as an external dependency
Build Error (BuildTailwindPlugin)

Cannot find module 'tailwindcss/plugins/container'

This is a new application and the only issue I can find is that the project is in a yarn workspace instead of the root node project so paths are different.

This could be an issue with the build tree including relative paths to the project instead of doing a lookup to find the project/node_module root?

Issue

• v0.6.0 is missing the focus variants https://tailwindcss.com/docs/functions-and-directives/#variants
• https://github.com/embermap/ember-cli-tailwind/blob/v0.6.0/blueprints/ember-cli-tailwind/files/__root__/tailwind/config/tailwind.js
• No other version to use from NPM.

Expected

• https://github.com/embermap/ember-cli-tailwind/blob/master/blueprints/ember-cli-tailwind/files/__root__/tailwind/config/tailwind.js

There is some helpful usage documentation noted in the release notes. We've also added a new build option with #17. This might be a good point to start putting together some doc.

Related #38

I generated a new ember 3.7.1 project and in the application.hbs file, I just add a simple <input type="text" placeholder="test">. In my app.scss file, I just have @import 'tailwind';.

Here are the only addition addons I have installed:

• ember-cli-sass
• ember-cli-mirage
• ember-cli-tailwind

Here is my system info

If I remove the tailwind package, my input element looks just fine. Thoughts?

After creating a fresh Ember 3.0 app and installing ember-cli-tailwind, it appears that the base tailwind styles are not being loaded.

In my terminal, I see the following warning:

WARNING: Unable to process Tailwind styles for a non-string tree

Additionally, in the console I see this error:

Refused to apply style from 'http://localhost:4200/assets/tailwind.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

I'm testing this by using some basic markup in application.hbs and seeing if any of the styles show up:

<div class="container mx-auto">
  <h1 class="text-red-darkest">Hello world!</h1>
</div>

The example app can be found here

Tailwind plugins allows Tailwind to do so much more than it does out of the box.
For example in Tailwind 0.7 they added the ability to add custom variants via plugins:
tailwindlabs/tailwindcss#505 (comment)

Would be great to have the ability to both create a plugin for personal use, using a blueprint such as ember g tailwind-plugin which would put the plugin in a plugins/*.js directory

Another thing that we could potentially add is a blueprint such as ember tailwind install new-plugin which would install the plugin from NPM and wire it up for usage, handling things like requiring it in the tailwind/config.js

This is really awesome! I used it to add a direction variant so that you can do rtl:ml-2 ltr:mr-2 for example and it will do either one depending on the [dir] of the parents

Background

The issue title may not be the most helpful (sorry) so here's a brief example of what I'm working on and looking to accomplish.

I have an Ember addon that serves as a component library. In the component library, we use ember-cli-addon-docs to document component APIs and behavior. Lastly, we have an Ember app that use the components provided by the component library.

The Issue

When using the addon's components in our Ember app, the tailwind styles work as expected. 👌🏾

When viewing the components inside of the addon's dummy apps, the styles don't appear to be loaded at all. 😭

Reproduction

I've created an example addon and ember app the mirrors my current project setup.

Example Addon with ember-cli-tailwind and ember-cli-addon-docs

Example App that uses the 'Example Addon'

I'm willing to provide any additional about my setup/configuration that may be useful for digging into this.

Thanks!

Build failed.
Build Error (broccoli-persistent-filter:CleanCSSFilter) in assets/my-app.css

Broken @import declaration of "tailwind.css"

app/styles/app.css

@import 'tailwind.css';

Reproduction Steps:

$ ember -v
ember-cli: 3.1.4
node: 8.11.3
os: darwin x64
$ ember init
$ ember install ember-cli-tailwind
$ ember build --production

Workaround:
Disable minifyCSS in ember-cli-build.js

Desired Behavior:
CSS is run through Clean-CSS after PostCSS when building for production.

This change would allow folks to provide a customized style guide without the need to maintain a fork.

Hi Sam 👋

I'm wondering if there's a way to configure postcss-nested somehow? I miss this feature from Sass the most and it would be nice if I could use it inside of the tailwind directory.

Thanks for all of your work on ember-cli-tailwind it has been a great experience using it to build my new personal site with Prember.

❤️

// app.scss

$brand: '#3490DC';
@import 'tailwind';

//tailwind/config/colors.js

export default {
  brand: '$brand'
}

get error:
Sass Syntax Error (SassCompiler) in /var/folders/fn/_xqyrrmd59z731p6z5vld3_h0000gn/T/broccoli-37563qHE89kezt5cE/out-215-broccoli_merge_trees_full_application//app/styles/tailwind.css:869:21

Error: Sass variables aren't allowed in plain CSS.
╷
869 │ background-color: $brand;
│ ^^^^^^
╵

@dfreeman I tried using our new code in ember-cli-addon-docs, but I believe some of the logic doesn't work.

Adding this addon to Addon Docs and stepping through the debuggger, I saw this line was true (and includer.treePaths was undefined). So index.js thought Addon Docs was an app. (Of course, the dummy app is an app, which might be where I'm getting confused...)

I should probably get my thoughts down here, just because a lot has been in my head thus far.

My goal is for e-cli-tailwind to be "the way" to get Tailwind into an Ember app or addon. A few use cases I have in mind:

1. I want to use Tailwind to style my app. Install e-cli-tailwind, get the modules in app/styles/tailwind/* and go to town.
2. I want to use Tailwind to style my addon's dummy app.
3. I want to use Tailwind to style some components my addon is shipping to host apps.

(3) is what I'm interested in doing in Addon Docs - I want to use Tailwind classes to style <docs-viewer>, for example. And ideally I'd like to prefix them, in case host apps would like to use their own customized Tailwind to style their dummy app. (And eventually use postcss to strip unused classes).

We don't have to tackle all of this now of course, I just wanted to put my thoughts down. Also, in the Addon Docs design work I'm doing, I just imported a static build of tailwind.css, so I'm not blocked. But it would be really cool if we could get e-cli-tailwind working for addons (so we could restrict colors, keep styles maintainable and so on).

Right now, tailwind/components need to be manually imported. Let's figure out a way to automatically import them.

See #29 (comment)

I think we should provide some container components/modules that have all the data needed to build a custom styleguide. I still like the lib having the default styleguide available out of the box, I think keeping it in the addon would make it easier to develop. We should make it opt-outable for folks who want to customize it.

Hey guys,

I just installed the addon in an Ember 3.4 project and I noticed the styleguide is not working as expected. It just displays a blank page.

I debugged it a bit and it seems to be caused by the template only etw/module-section component. It doesn't use the @ argument syntax to retrieve values. I'm not sure when the backup lookup mechanism changed, but it doesn't seem to be working anymore.

Changing all arguments to use @ fixes the problem.

Did anyone else have this problem? Or does this depend on something in the parent project?

Just generated a new Octane project and when I try to install tailwind-css I am getting errors. When I try to start server I get WARNING: No build target was detected for ember-cli-tailwind. Tailwind is not being included in your project..

From install log

ERROR Summary:

  - broccoliBuilderErrorStack: [undefined]
  - code: MODULE_NOT_FOUND
  - codeFrame: [undefined]
  - errorMessage: Cannot find module 'broccoli-rollup'
  - errorType: [undefined]
  - location:
    - column: [undefined]
    - file: [undefined]
    - line: [undefined]
  - message: Cannot find module 'broccoli-rollup'
  - name: Error
  - nodeAnnotation: [undefined]
  - nodeName: [undefined]
  - originalErrorMessage: [undefined]
  - stack: Error: Cannot find module 'broccoli-rollup'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (/Users/john.costanzo/Development/online-booking/node_modules/ember-cli-tailwind/lib/build-tailwind.js:9:16)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)

EC-Tailwind ships with some stuff to build an autogenerated /tailwind route, to use during development.

We should add a shouldIncludeStyleguide option that, when false, removes this stuff, and default it to false in prod and true otherwise.

• don't app.import('etw.css')
• don't ship the components/controllers/etc. code used for the styleguide

Hi @samselikoff 👋

I'm trying to use autoprefixer in my app following the example from ember-cli-postcss:

const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const autoprefixer = require('autoprefixer');

module.exports = function (defaults) {
  const app = new EmberApp(defaults, {
    postcssOptions: {
      compile: {
        enabled: false
      },
      filter: {
        enabled: true,
        plugins: [
          {
            module: autoprefixer
          }
        ]
      }
    }
  });
  return app.toTree();
};

My simple use case is just to add the required prefixes for the .appearance-none class tailwind provides.

Unfortunately this results in a Build Error (broccoli-persistent-filter:PostcssFilter) in unrelated tailwind components I've added and I'm not sure how to continue.

Commenting out those components no longer yields the error, but an error is shown in the console: Refused to apply style from 'http://localhost:4200/assets/my-app.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Any ideas on what to do next?

• Am I missing something obvious?
• Is there some advanced configuration to add? (either this addon or postcss). Reading the docs I have a hunch that I could adapt the steps from the advanced addon usage readme section to my app. But I'm not yet entirely sure how to continue or if I should continue on this route at all.
• Is this not supported at all yet? I've seen your comment on #68 about exposing the postcss pipeline.

Thanks in advance!

It would be great if we could configure our ember-cli-tailwind setup to not include preflight by default and a way to exclude the normalize css styles because some of the default styles in etw.css are conflicting with my current styles. Right now to deal with this, I am making these changes in a forked repo and including that in my app instead.

Thanks for making this addon, it saves a lot of time on custom postcss + tailwind configs, but I'd really like to not have that etw- on every class. So,I've searched the code looking for the source of this prefix setting, I've also tried to change the options.prefix value on config/tailwind.js but it won't do anything. The motivation is so anyone can use the actual tailwind class names, and then just copy and paste already components with ease. Hope this makes sense, thanks a lot guys

When on the follow route: /mobile/my-nested-route and making edits to JS code used in foresaid route.

Refused to apply style from 'http://localhost:4200/mobile/tailwind.css?livereload=1536473395783' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Correct path is http://localhost:4200/assets/tailwind.css

app.css
@import 'tailwind.css';

Tailwind just recently hit v1.0 milestone. This addon should be updated to reflect that aswell.

I've tried latest ember-cli + source addon (using ember-octane-addon-blueprint) and installed ec-addon-docs. When trying to serve it. I come across this error message:

ERROR Summary:

  - broccoliBuilderErrorStack: Error: No ESLint configuration found.
    at Config.getLocalConfigHierarchy (/Users/thomas/code/packages/my-project/node_modules/eslint/lib/config.js:268:39)
    at Config.getConfigHierarchy (/Users/thomas/code/packages/my-project/node_modules/eslint/lib/config.js:192:43)
    at Config.getConfigVector (/Users/thomas/code/packages/my-project/node_modules/eslint/lib/config.js:299:21)
    at Config.getConfig (/Users/thomas/code/packages/my-project/node_modules/eslint/lib/config.js:342:29)
    at CLIEngine.getConfigForFile (/Users/thomas/code/packages/my-project/node_modules/eslint/lib/cli-engine.js:729:29)
    at EslintValidationFilter.cacheKeyProcessString (/Users/thomas/code/packages/my-project/packages/ember-my-project/node_modules/broccoli-lint-eslint/lib/index.js:118:26)
    at Object.processString (/Users/thomas/code/packages/my-project/packages/ember-my-project/node_modules/broccoli-lint-eslint/node_modules/broccoli-persistent-filter/lib/strategies/persistent.js:30:19)
    at Processor.processString (/Users/thomas/code/packages/my-project/packages/ember-my-project/node_modules/broccoli-lint-eslint/node_modules/broccoli-persistent-filter/lib/processor.js:19:27)
    at resolve (/Users/thomas/code/packages/my-project/packages/ember-my-project/node_modules/broccoli-lint-eslint/node_modules/broccoli-persistent-filter/index.js:336:16)
    at initializePromise (/Users/thomas/code/packages/my-project/packages/ember-my-project/node_modules/broccoli-lint-eslint/node_modules/rsvp/dist/rsvp.js:520:5)
  - code: [undefined]
  - codeFrame: No ESLint configuration found.
  - errorMessage: addon/utils/classes-for-module-style.js: No ESLint configuration found.
        in /var/folders/tv/67gb0k1s7yz4f0cgn8kvqbj00000gn/T/broccoli-45803KLZj2hsEGDqm/out-391-funnel
        at broccoli-persistent-filter:EslintValidationFilter
  - errorType: Build Error
  - location:
    - column: [undefined]
    - file: addon/utils/classes-for-module-style.js
    - line: [undefined]
    - treeDir: /var/folders/tv/67gb0k1s7yz4f0cgn8kvqbj00000gn/T/broccoli-45803KLZj2hsEGDqm/out-391-funnel
  - message: addon/utils/classes-for-module-style.js: No ESLint configuration found.
        in /var/folders/tv/67gb0k1s7yz4f0cgn8kvqbj00000gn/T/broccoli-45803KLZj2hsEGDqm/out-391-funnel
        at broccoli-persistent-filter:EslintValidationFilter
  - name: BuildError
  - nodeAnnotation: [undefined]
  - nodeName: broccoli-persistent-filter:EslintValidationFilter
  - originalErrorMessage: No ESLint configuration found.
  - stack: Error: No ESLint configuration found.
    at Config.getLocalConfigHierarchy (/Users/thomas/code/packages/my-project/node_modules/eslint/lib/config.js:268:39)
    at Config.getConfigHierarchy (/Users/thomas/code/packages/my-project/node_modules/eslint/lib/config.js:192:43)
    at Config.getConfigVector (/Users/thomas/code/packages/my-project/node_modules/eslint/lib/config.js:299:21)
    at Config.getConfig (/Users/thomas/code/packages/my-project/node_modules/eslint/lib/config.js:342:29)
    at CLIEngine.getConfigForFile (/Users/thomas/code/packages/my-project/node_modules/eslint/lib/cli-engine.js:729:29)
    at EslintValidationFilter.cacheKeyProcessString (/Users/thomas/code/packages/my-project/packages/ember-my-project/node_modules/broccoli-lint-eslint/lib/index.js:118:26)
    at Object.processString (/Users/thomas/code/packages/my-project/packages/ember-my-project/node_modules/broccoli-lint-eslint/node_modules/broccoli-persistent-filter/lib/strategies/persistent.js:30:19)
    at Processor.processString (/Users/thomas/code/packages/my-project/packages/ember-my-project/node_modules/broccoli-lint-eslint/node_modules/broccoli-persistent-filter/lib/processor.js:19:27)
    at resolve (/Users/thomas/code/packages/my-project/packages/ember-my-project/node_modules/broccoli-lint-eslint/node_modules/broccoli-persistent-filter/index.js:336:16)
    at initializePromise (/Users/thomas/code/packages/my-project/packages/ember-my-project/node_modules/broccoli-lint-eslint/node_modules/rsvp/dist/rsvp.js:520:5)

I don't know if this really is related to ember-cli-tailwind - it just happens to be my last trace, so you might close it right away.

Here is my package.json:

{
  "name": "my-project",
  "version": "0.0.0",
  "keywords": [
    "ember-addon"
  ],
  "private": true,
  "description": "Small description for my-project goes here",
  "repository": "",
  "license": "MIT",
  "author": "",
  "directories": {
    "doc": "doc",
    "test": "tests"
  },
  "scripts": {
    "build": "ember build",
    "lint:hbs": "ember-template-lint .",
    "lint:js": "eslint .",
    "start": "ember serve",
    "test": "ember test",
    "prepublishOnly": "ember ts:precompile",
    "postpublish": "ember ts:clean"
  },
  "dependencies": {
    "ember-auto-import": "^1.2.20",
    "ember-cli-babel": "^7.4.3",
    "ember-cli-htmlbars": "^3.0.1",
    "ember-cli-typescript": "^2.0.0-rc.2",
    "ember-css-modules": "npm:@buschtoens/[email protected]"
  },
  "devDependencies": {
    "@ember-decorators/babel-transforms": "^5.1.3",
    "@ember/optional-features": "^0.7.0",
    "@glimmer/component": "^0.14.0-alpha.3",
    "@types/ember": "^3.0.27",
    "@types/ember-qunit": "^3.4.5",
    "@types/ember-test-helpers": "^1.0.4",
    "@types/ember-testing-helpers": "^0.0.3",
    "@types/ember__test-helpers": "^0.7.7",
    "@types/qunit": "^2.5.4",
    "@types/rsvp": "^4.0.2",
    "babel-eslint": "^8.0.2",
    "broccoli-asset-rev": "^3.0.0",
    "ember-cli": "ember-cli/ember-cli#1fee05d354b3a231409062ef83256a53a049e1e4",
    "ember-cli-addon-docs": "buschtoens/ember-cli-addon-docs#fix/module-unification",
    "ember-cli-addon-docs-esdoc": "buschtoens/ember-cli-addon-docs-esdoc#feat/typescript",
    "ember-cli-app-version": "^3.2.0",
    "ember-cli-dependency-checker": "^3.1.0",
    "ember-cli-deploy": "^1.0.2",
    "ember-cli-deploy-build": "^1.1.1",
    "ember-cli-deploy-git": "^1.3.3",
    "ember-cli-deploy-git-ci": "^1.0.1",
    "ember-cli-eslint": "^5.1.0",
    "ember-cli-htmlbars-inline-precompile": "^2.1.0",
    "ember-cli-inject-live-reload": "^2.0.1",
    "ember-cli-sri": "^2.1.1",
    "ember-cli-template-lint": "^1.0.0-beta.1",
    "ember-cli-typescript-blueprints": "^2.0.0-beta.1",
    "ember-cli-uglify": "^2.1.0",
    "ember-export-application-global": "^2.0.0",
    "ember-load-initializers": "^2.0.0",
    "ember-maybe-import-regenerator": "^0.1.6",
    "ember-qunit": "^4.4.0",
    "ember-resolver": "^5.1.2",
    "ember-source": "https://s3.amazonaws.com/builds.emberjs.com/canary/shas/dcebf841eb2a44d3d3522e4533ad4da9994a5365.tgz",
    "eslint-plugin-ember": "^6.2.0",
    "loader.js": "^4.7.0",
    "qunit-dom": "^0.8.4",
    "typescript": "^3.3.3"
  },
  "engines": {
    "node": "6.* || 8.* || >= 10.*"
  },
  "ember-addon": {
    "configPath": "tests/dummy/config"
  }
}

ember-cli-tailwind looks for the app/styles/app.css entry point. Is it not possible to use whatever path configured by the host application?

If for example I override the default configuration in my ember-cli-build:

  let app = new EmberApp(defaults, {
    // Add options here
    outputPaths: {
      app: {
        css: {
          'app': '/assets/application-name.css'
        }
      }
    }
  })

I would expect ember-cli-tailwind to respect my configuration when looking for the entry point.

addon-A depends on ember-cli-tailwind, and has an /addon/tailwind dir.

addon-B depends on addon-A.

Verify that the tailwind styles end up in addon-B.

This package depends recursively on event-stream, which has malicious versions floating about. See:

dominictarr/event-stream#116
indexzero/ps-tree#33

The way this addon works is by reading in a /tailwind directory and adding a built tailwind.css file to the build. There are actually three situations in which this can occur:

1. An app, via the /app/tailwind/ directory. The tailwind.css file is added to the app's app.css file.
2. An addon, via the /addon/tailwind/ directory. The tailwind.css file is added to the host app's vendor.css file.
3. An addon, via the /test/dummy/app/tailwind/ directory (i.e. an addon's Dummy app). The tailwind.css file is added to the dummy app's app.css file.

Currently these are controlled via the buildTarget ENV option as described in this release.

If we can find a reliable way for the code that runs in index.js to know whether it is being run in situation #1, #2, or #3 above, we could eliminate this configuration step and ship the addon with smart defaults.

From my perspective, here are the ideal flows:

An app
You run ember install ember-cli-tailwind. The generator adds the /tailwind directory to app/tailwind. That's it - ember s would automatically detect the new directory and know to build Tailwind for the app.

An addon
You run ember install ember-cli-tailwind. The generator adds the /tailwind directory to addon/tailwind by default. If you just want to style your components and ship those styles to host apps, that's it - ember-cli-tailwind would know to package those up and throw them in vendor.css.

If you want to use tailwind to style your addon's dummy app, you can re-run the generator using ember g ember-cli-tailwind --dummy, which will put the /tailwind directory in /tests/dummy/app/tailwind.

Ember CLI Tailwind could autodetect the presence of the /tailwind directory in both /addon/tailwind and /tests/dummy/app/tailwind, and do the right thing for each configuration.

I would love to have some help with this, if anyone wants to take it on!

Related #23

Hey, first off thank you for taking time to wrap Tailwind for Ember, it's saving us a lot of time and headache.

We have a few components that are using Tailwind's @apply method. Since these are compiled after our regular SASS files it looks like source mapping isn't really a thing:

Is there a way to enable this or some place you think I should start looking to open a PR for it?

Issue

• Including @import 'tailwind.css'; in app.less file does not work

Goal

• being able to develop component files with less ./components/*.less

Other Approach

• This setup works with Edward's approach outlined in this video.
• Example tailwind / less

Hopefully, I'm doing it wrong, but let me know if this can be supported.

Tailwind has a plugins system, but I'm not sure how to add a plugin. Is it something that goes in ember-cli-build or environment.js?

Tailwind components are a great in-between if you'd like to reuse a set of functional css classes but don't want to create an Ember component.

In the /tailwind/config/modules.css file, you can define new components here. Note that the comments say that if you're using postcss-import, you can import them from separate files. This is the functionality I want added to ecli-tailwind.

• Add /tailwind/components/.gitkeep to the generated files (as an affordance)
• Add postcss-import so @import works. (Currently I can define new tailwind components in that file directly, but @import doens't work).
• Possible to auto-import every file in /tailwind/components?

ember-glimmer.js:4612 Uncaught TypeError: template.asLayout is not a function
    at TemplateOnlyComponentManager.getLayout (ember-glimmer.js:4612)
    at CompileTimeLookup.getLayout (ember-glimmer.js:4561)
    at LazyCompiler.resolveLayoutForHandle (opcode-compiler.js:896)
    at ComponentBuilder._static [as static] (opcode-compiler.js:1036)
    at refineInlineSyntax (ember-glimmer.js:6907)
    at Inlines.compile (opcode-compiler.js:398)
    at LazyCompiler.compileInline (opcode-compiler.js:853)
    at LazyOpcodeBuilder.compileInline (opcode-compiler.js:1312)
    at opcode-compiler.js:181
    at Compilers.compile (opcode-compiler.js:41)

I'm on Ember 3.3.1 and v0.6.0 of this addon.

Was playing around with the /tailwind app and this idea came to me:

Basic: Instead of just copying the class when clicking on that class, apply that style to the element in the detail panel, so it can be previewed.

Advanced: Allow creating a snippet of markup with ids applied to each. The user can select the element by id and add/remove classes using the details panel. Then they can preview the result. This can get pretty advanced. Might be better as an addon and then added into the tailwind route.

A simpler alternative to advanced could be not allowing raw markup, but using a ui to create something (like a tree).