├── addon
├── .gitkeep
└── styles
│ └── addon.scss
├── bin
├── vendor
└── .gitkeep
├── tests
├── helpers
│ └── .gitkeep
├── integration
│ └── .gitkeep
├── dummy
│ ├── app
│ │ ├── helpers
│ │ │ └── .gitkeep
│ │ ├── models
│ │ │ └── .gitkeep
│ │ ├── routes
│ │ │ └── .gitkeep
│ │ ├── styles
│ │ │ └── app.scss
│ │ ├── components
│ │ │ └── .gitkeep
│ │ ├── controllers
│ │ │ └── .gitkeep
│ │ ├── templates
│ │ │ ├── components
│ │ │ │ └── .gitkeep
│ │ │ └── application.hbs
│ │ ├── resolver.js
│ │ ├── router.js
│ │ ├── tailwind
│ │ │ ├── utilities
│ │ │ │ └── your-utility.css
│ │ │ ├── components
│ │ │ │ └── your-component.css
│ │ │ ├── config
│ │ │ │ ├── line-height.js
│ │ │ │ ├── letter-spacing.js
│ │ │ │ ├── text-colors.js
│ │ │ │ ├── background-colors.js
│ │ │ │ ├── opacity.js
│ │ │ │ ├── z-index.js
│ │ │ │ ├── min-width.js
│ │ │ │ ├── background-size.js
│ │ │ │ ├── max-height.js
│ │ │ │ ├── svg-fill.js
│ │ │ │ ├── min-height.js
│ │ │ │ ├── svg-stroke.js
│ │ │ │ ├── border-widths.js
│ │ │ │ ├── border-radius.js
│ │ │ │ ├── border-colors.js
│ │ │ │ ├── font-weights.js
│ │ │ │ ├── max-width.js
│ │ │ │ ├── padding.js
│ │ │ │ ├── shadows.js
│ │ │ │ └── margin.js
│ │ │ └── modules.css
│ │ ├── app.js
│ │ └── index.html
│ ├── public
│ │ └── robots.txt
│ └── config
│ │ └── targets.js
├── test-helper.js
└── acceptance
│ ├── index-test.js
│ └── tailwind-test.js
├── .watchmanconfig
├── test-projects
├── scenario-1-app-using-tailwind
│ └── sample-app
│ │ ├── vendor
│ │ └── .gitkeep
│ │ ├── tests
│ │ ├── unit
│ │ │ └── .gitkeep
│ │ ├── integration
│ │ │ └── .gitkeep
│ │ ├── helpers
│ │ │ ├── destroy-app.js
│ │ │ ├── start-app.js
│ │ │ └── module-for-acceptance.js
│ │ ├── test-helper.js
│ │ └── acceptance
│ │ │ └── consuming-app-smoke-test.js
│ │ ├── .bin
│ │ ├── app
│ │ ├── styles
│ │ │ └── app.css
│ │ ├── templates
│ │ │ └── application.hbs
│ │ ├── resolver.js
│ │ ├── router.js
│ │ ├── tailwind
│ │ │ ├── utilities
│ │ │ │ └── your-utility.css
│ │ │ ├── components
│ │ │ │ └── your-component.css
│ │ │ ├── config
│ │ │ │ ├── line-height.js
│ │ │ │ ├── letter-spacing.js
│ │ │ │ ├── text-colors.js
│ │ │ │ ├── background-colors.js
│ │ │ │ ├── opacity.js
│ │ │ │ ├── background-size.js
│ │ │ │ ├── min-width.js
│ │ │ │ ├── z-index.js
│ │ │ │ ├── max-height.js
│ │ │ │ ├── min-height.js
│ │ │ │ ├── svg-fill.js
│ │ │ │ ├── svg-stroke.js
│ │ │ │ ├── border-widths.js
│ │ │ │ ├── border-radius.js
│ │ │ │ ├── font-weights.js
│ │ │ │ ├── border-colors.js
│ │ │ │ ├── max-width.js
│ │ │ │ ├── colors.js
│ │ │ │ ├── padding.js
│ │ │ │ └── shadows.js
│ │ │ └── modules.css
│ │ ├── app.js
│ │ └── index.html
│ │ ├── .watchmanconfig
│ │ ├── public
│ │ └── robots.txt
│ │ ├── config
│ │ └── targets.js
│ │ ├── .ember-cli
│ │ ├── .travis.yml
│ │ ├── .gitignore
│ │ ├── .editorconfig
│ │ ├── testem.js
│ │ ├── ember-cli-build.js
│ │ └── .eslintrc.js
├── scenario-2-addon-using-tailwind
│ ├── sample-addon
│ │ ├── addon
│ │ │ ├── .gitkeep
│ │ │ ├── templates
│ │ │ │ └── components
│ │ │ │ │ ├── ui-button.hbs
│ │ │ │ │ └── ui-title.hbs
│ │ │ ├── styles
│ │ │ │ └── addon.css
│ │ │ ├── components
│ │ │ │ ├── ui-title.js
│ │ │ │ └── ui-button.js
│ │ │ └── tailwind
│ │ │ │ ├── utilities
│ │ │ │ └── your-utility.css
│ │ │ │ ├── components
│ │ │ │ └── your-component.css
│ │ │ │ ├── config
│ │ │ │ ├── line-height.js
│ │ │ │ ├── letter-spacing.js
│ │ │ │ ├── text-colors.js
│ │ │ │ ├── background-colors.js
│ │ │ │ ├── opacity.js
│ │ │ │ ├── background-size.js
│ │ │ │ ├── min-width.js
│ │ │ │ ├── z-index.js
│ │ │ │ ├── max-height.js
│ │ │ │ ├── min-height.js
│ │ │ │ ├── svg-fill.js
│ │ │ │ ├── svg-stroke.js
│ │ │ │ ├── border-widths.js
│ │ │ │ ├── border-radius.js
│ │ │ │ ├── font-weights.js
│ │ │ │ ├── border-colors.js
│ │ │ │ ├── max-width.js
│ │ │ │ ├── colors.js
│ │ │ │ ├── padding.js
│ │ │ │ └── shadows.js
│ │ │ │ └── modules.css
│ │ ├── app
│ │ │ ├── .gitkeep
│ │ │ └── components
│ │ │ │ ├── ui-button.js
│ │ │ │ └── ui-title.js
│ │ ├── tests
│ │ │ ├── unit
│ │ │ │ └── .gitkeep
│ │ │ ├── helpers
│ │ │ │ ├── .gitkeep
│ │ │ │ ├── destroy-app.js
│ │ │ │ ├── start-app.js
│ │ │ │ └── module-for-acceptance.js
│ │ │ ├── integration
│ │ │ │ ├── .gitkeep
│ │ │ │ └── components
│ │ │ │ │ ├── ui-title-test.js
│ │ │ │ │ └── ui-button-test.js
│ │ │ ├── dummy
│ │ │ │ ├── app
│ │ │ │ │ ├── styles
│ │ │ │ │ │ └── app.css
│ │ │ │ │ ├── resolver.js
│ │ │ │ │ ├── templates
│ │ │ │ │ │ └── application.hbs
│ │ │ │ │ ├── router.js
│ │ │ │ │ ├── app.js
│ │ │ │ │ └── index.html
│ │ │ │ ├── public
│ │ │ │ │ └── robots.txt
│ │ │ │ └── config
│ │ │ │ │ └── targets.js
│ │ │ └── test-helper.js
│ │ ├── vendor
│ │ │ └── .gitkeep
│ │ ├── .bin
│ │ ├── .eslintignore
│ │ ├── .watchmanconfig
│ │ ├── index.js
│ │ ├── config
│ │ │ └── environment.js
│ │ ├── .ember-cli
│ │ ├── .npmignore
│ │ ├── .gitignore
│ │ ├── .editorconfig
│ │ ├── ember-cli-build.js
│ │ └── testem.js
│ └── sample-app
│ │ ├── vendor
│ │ └── .gitkeep
│ │ ├── app
│ │ ├── styles
│ │ │ └── app.css
│ │ ├── resolver.js
│ │ ├── templates
│ │ │ └── application.hbs
│ │ ├── router.js
│ │ ├── app.js
│ │ └── index.html
│ │ ├── tests
│ │ ├── unit
│ │ │ └── .gitkeep
│ │ ├── integration
│ │ │ └── .gitkeep
│ │ ├── helpers
│ │ │ ├── destroy-app.js
│ │ │ ├── start-app.js
│ │ │ └── module-for-acceptance.js
│ │ ├── test-helper.js
│ │ └── acceptance
│ │ │ └── consuming-app-smoke-test.js
│ │ ├── .bin
│ │ ├── .watchmanconfig
│ │ ├── public
│ │ └── robots.txt
│ │ ├── config
│ │ └── targets.js
│ │ ├── .ember-cli
│ │ ├── .travis.yml
│ │ ├── .gitignore
│ │ ├── .editorconfig
│ │ ├── testem.js
│ │ ├── ember-cli-build.js
│ │ └── .eslintrc.js
├── scenario-3-disabled-styleguide
│ ├── sample-addon
│ │ ├── addon
│ │ │ └── .gitkeep
│ │ ├── app
│ │ │ └── .gitkeep
│ │ ├── vendor
│ │ │ └── .gitkeep
│ │ ├── tests
│ │ │ ├── unit
│ │ │ │ └── .gitkeep
│ │ │ ├── helpers
│ │ │ │ ├── .gitkeep
│ │ │ │ ├── destroy-app.js
│ │ │ │ ├── start-app.js
│ │ │ │ └── module-for-acceptance.js
│ │ │ ├── dummy
│ │ │ │ ├── app
│ │ │ │ │ ├── styles
│ │ │ │ │ │ └── app.css
│ │ │ │ │ ├── resolver.js
│ │ │ │ │ ├── templates
│ │ │ │ │ │ └── application.hbs
│ │ │ │ │ ├── router.js
│ │ │ │ │ ├── app.js
│ │ │ │ │ └── index.html
│ │ │ │ ├── public
│ │ │ │ │ └── robots.txt
│ │ │ │ └── config
│ │ │ │ │ └── targets.js
│ │ │ ├── integration
│ │ │ │ ├── .gitkeep
│ │ │ │ └── components
│ │ │ │ │ ├── ui-title-test.js
│ │ │ │ │ └── ui-button-test.js
│ │ │ ├── test-helper.js
│ │ │ └── acceptance
│ │ │ │ └── dummy-app-smoke-test.js
│ │ ├── .bin
│ │ ├── .eslintignore
│ │ ├── .watchmanconfig
│ │ ├── index.js
│ │ ├── config
│ │ │ └── environment.js
│ │ ├── .ember-cli
│ │ ├── .npmignore
│ │ ├── .gitignore
│ │ ├── .editorconfig
│ │ ├── ember-cli-build.js
│ │ └── testem.js
│ └── sample-addon-with-tailwind
│ │ ├── addon
│ │ ├── .gitkeep
│ │ ├── templates
│ │ │ └── components
│ │ │ │ ├── ui-button.hbs
│ │ │ │ └── ui-title.hbs
│ │ ├── components
│ │ │ ├── ui-title.js
│ │ │ └── ui-button.js
│ │ └── tailwind
│ │ │ ├── utilities
│ │ │ └── your-utility.css
│ │ │ ├── components
│ │ │ └── your-component.css
│ │ │ └── config
│ │ │ ├── letter-spacing.js
│ │ │ ├── line-height.js
│ │ │ ├── text-colors.js
│ │ │ ├── background-colors.js
│ │ │ ├── opacity.js
│ │ │ ├── background-size.js
│ │ │ ├── min-width.js
│ │ │ ├── z-index.js
│ │ │ ├── max-height.js
│ │ │ ├── min-height.js
│ │ │ ├── svg-fill.js
│ │ │ ├── border-widths.js
│ │ │ ├── svg-stroke.js
│ │ │ ├── border-radius.js
│ │ │ ├── font-weights.js
│ │ │ ├── border-colors.js
│ │ │ ├── max-width.js
│ │ │ └── colors.js
│ │ ├── app
│ │ ├── .gitkeep
│ │ └── components
│ │ │ ├── ui-button.js
│ │ │ └── ui-title.js
│ │ ├── vendor
│ │ └── .gitkeep
│ │ ├── tests
│ │ ├── unit
│ │ │ └── .gitkeep
│ │ ├── helpers
│ │ │ ├── .gitkeep
│ │ │ ├── destroy-app.js
│ │ │ ├── start-app.js
│ │ │ └── module-for-acceptance.js
│ │ ├── integration
│ │ │ ├── .gitkeep
│ │ │ └── components
│ │ │ │ ├── ui-title-test.js
│ │ │ │ └── ui-button-test.js
│ │ ├── dummy
│ │ │ ├── app
│ │ │ │ ├── styles
│ │ │ │ │ └── app.css
│ │ │ │ ├── resolver.js
│ │ │ │ ├── templates
│ │ │ │ │ └── application.hbs
│ │ │ │ ├── router.js
│ │ │ │ ├── app.js
│ │ │ │ └── index.html
│ │ │ ├── public
│ │ │ │ └── robots.txt
│ │ │ └── config
│ │ │ │ └── targets.js
│ │ ├── test-helper.js
│ │ └── acceptance
│ │ │ └── dummy-app-smoke-test.js
│ │ ├── .bin
│ │ ├── .eslintignore
│ │ ├── .watchmanconfig
│ │ ├── config
│ │ └── environment.js
│ │ ├── index.js
│ │ ├── .ember-cli
│ │ ├── .npmignore
│ │ ├── .gitignore
│ │ ├── .editorconfig
│ │ ├── ember-cli-build.js
│ │ └── testem.js
└── scenario-4-addon-using-sass
│ ├── sample-addon
│ ├── addon
│ │ ├── .gitkeep
│ │ ├── styles
│ │ │ └── addon.scss
│ │ └── tailwind
│ │ │ ├── utilities
│ │ │ └── your-utility.css
│ │ │ ├── components
│ │ │ └── your-component.css
│ │ │ ├── config
│ │ │ ├── letter-spacing.js
│ │ │ ├── line-height.js
│ │ │ ├── text-colors.js
│ │ │ ├── background-colors.js
│ │ │ ├── opacity.js
│ │ │ ├── background-size.js
│ │ │ ├── min-width.js
│ │ │ ├── z-index.js
│ │ │ ├── max-height.js
│ │ │ ├── min-height.js
│ │ │ ├── svg-fill.js
│ │ │ ├── svg-stroke.js
│ │ │ ├── border-widths.js
│ │ │ ├── border-radius.js
│ │ │ ├── font-weights.js
│ │ │ ├── border-colors.js
│ │ │ ├── max-width.js
│ │ │ ├── colors.js
│ │ │ ├── padding.js
│ │ │ └── shadows.js
│ │ │ └── modules.css
│ ├── vendor
│ │ └── .gitkeep
│ ├── tests
│ │ ├── helpers
│ │ │ ├── .gitkeep
│ │ │ ├── destroy-app.js
│ │ │ ├── start-app.js
│ │ │ └── module-for-acceptance.js
│ │ ├── unit
│ │ │ └── .gitkeep
│ │ ├── dummy
│ │ │ ├── app
│ │ │ │ ├── styles
│ │ │ │ │ └── app.scss
│ │ │ │ ├── resolver.js
│ │ │ │ ├── templates
│ │ │ │ │ └── application.hbs
│ │ │ │ ├── router.js
│ │ │ │ ├── app.js
│ │ │ │ └── index.html
│ │ │ ├── public
│ │ │ │ └── robots.txt
│ │ │ └── config
│ │ │ │ └── targets.js
│ │ ├── test-helper.js
│ │ └── acceptance
│ │ │ └── dummy-app-smoke-test.js
│ ├── .bin
│ ├── .eslintignore
│ ├── .watchmanconfig
│ ├── config
│ │ └── environment.js
│ ├── .ember-cli
│ ├── .npmignore
│ ├── .gitignore
│ ├── .editorconfig
│ ├── ember-cli-build.js
│ ├── testem.js
│ └── index.js
│ └── sample-app
│ └── node_modules
│ ├── sample-addon
│ └── .bin
├── config
└── environment.js
├── app
├── services
│ └── etw-tailwind-styleguide.js
├── components
│ └── etw
│ │ ├── module-section.js
│ │ └── module-style-example.js
└── templates
│ └── components
│ └── etw
│ └── module-section.hbs
├── CHANGELOG.md
├── node-tests
└── fixtures
│ ├── app-with-components
│ └── tailwind
│ │ ├── modules.css
│ │ ├── components
│ │ └── button.css
│ │ └── config
│ │ └── tailwind.js
│ └── app-with-tailwind
│ └── tailwind
│ ├── modules.css
│ └── config
│ └── tailwind.js
├── .eslintignore
├── .ember-cli
├── blueprints
└── ember-cli-tailwind
│ └── files
│ └── __root__
│ └── tailwind
│ ├── utilities
│ └── your-utility.css
│ ├── components
│ └── your-component.css
│ ├── config
│ ├── letter-spacing.js
│ ├── line-height.js
│ ├── text-colors.js
│ ├── background-colors.js
│ ├── opacity.js
│ ├── z-index.js
│ ├── min-width.js
│ ├── background-size.js
│ ├── max-height.js
│ ├── svg-fill.js
│ ├── min-height.js
│ ├── svg-stroke.js
│ ├── border-widths.js
│ ├── border-radius.js
│ ├── border-colors.js
│ ├── font-weights.js
│ └── max-width.js
│ └── modules.css
├── .dependabot
└── config.yml
├── .npmignore
├── .editorconfig
├── .gitignore
├── ember-cli-build.js
├── scripts
└── test.sh
└── testem.js
/addon/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/bin:
--------------------------------------------------------------------------------
1 | ../../../..
--------------------------------------------------------------------------------
/vendor/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/tests/helpers/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/tests/integration/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/tests/dummy/app/helpers/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/tests/dummy/app/models/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/tests/dummy/app/routes/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/tests/dummy/app/styles/app.scss:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/tests/dummy/app/components/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/components/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.watchmanconfig:
--------------------------------------------------------------------------------
1 | {
2 | "ignore_dirs": ["tmp", "dist"]
3 | }
4 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/vendor/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/addon/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/app/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-app/vendor/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon/addon/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon/app/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon/vendor/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/addon/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/vendor/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/tests/unit/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/tests/unit/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/vendor/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-app/app/styles/app.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-app/tests/unit/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon/tests/unit/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/tests/helpers/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/tests/unit/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/tests/integration/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/tests/helpers/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-app/tests/integration/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon/tests/helpers/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/tests/integration/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/addon/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/app/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/vendor/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon/tests/dummy/app/styles/app.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon/tests/integration/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/tests/dummy/app/styles/app.scss:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/.bin:
--------------------------------------------------------------------------------
1 | ../../../node_modules/.bin
2 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/tests/dummy/app/styles/app.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-app/.bin:
--------------------------------------------------------------------------------
1 | ../../../node_modules/.bin
2 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/tests/unit/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon/.bin:
--------------------------------------------------------------------------------
1 | ../../../node_modules/.bin
2 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/.bin:
--------------------------------------------------------------------------------
1 | ../../../node_modules/.bin
2 |
--------------------------------------------------------------------------------
/tests/dummy/public/robots.txt:
--------------------------------------------------------------------------------
1 | # http://www.robotstxt.org
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/.bin:
--------------------------------------------------------------------------------
1 | ../../../node_modules/.bin
2 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/tests/helpers/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/tests/integration/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-app/node_modules/sample-addon:
--------------------------------------------------------------------------------
1 | ../../sample-addon
--------------------------------------------------------------------------------
/tests/dummy/app/templates/application.hbs:
--------------------------------------------------------------------------------
1 | I am the Dummy app
2 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/tests/dummy/app/styles/app.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon/.eslintignore:
--------------------------------------------------------------------------------
1 | /blueprints/*/files/**/*.js
2 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/.eslintignore:
--------------------------------------------------------------------------------
1 | /blueprints/*/files/**/*.js
2 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-app/node_modules/.bin:
--------------------------------------------------------------------------------
1 | ../../../../node_modules/.bin
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/app/styles/app.css:
--------------------------------------------------------------------------------
1 | @import 'tailwind.css';
2 |
3 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/.eslintignore:
--------------------------------------------------------------------------------
1 | /blueprints/*/files/**/*.js
2 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/addon/templates/components/ui-button.hbs:
--------------------------------------------------------------------------------
1 | {{yield}}
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/.bin:
--------------------------------------------------------------------------------
1 | ../../../node_modules/.bin
2 |
--------------------------------------------------------------------------------
/tests/dummy/app/resolver.js:
--------------------------------------------------------------------------------
1 | import Resolver from 'ember-resolver';
2 |
3 | export default Resolver;
4 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/.eslintignore:
--------------------------------------------------------------------------------
1 | /blueprints/*/files/**/*.js
2 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/.watchmanconfig:
--------------------------------------------------------------------------------
1 | {
2 | "ignore_dirs": ["tmp", "dist"]
3 | }
4 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/.watchmanconfig:
--------------------------------------------------------------------------------
1 | {
2 | "ignore_dirs": ["tmp", "dist"]
3 | }
4 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-app/.watchmanconfig:
--------------------------------------------------------------------------------
1 | {
2 | "ignore_dirs": ["tmp", "dist"]
3 | }
4 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/addon/templates/components/ui-button.hbs:
--------------------------------------------------------------------------------
1 | {{yield}}
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon/.watchmanconfig:
--------------------------------------------------------------------------------
1 | {
2 | "ignore_dirs": ["tmp", "dist"]
3 | }
4 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/.watchmanconfig:
--------------------------------------------------------------------------------
1 | {
2 | "ignore_dirs": ["tmp", "dist"]
3 | }
4 |
--------------------------------------------------------------------------------
/addon/styles/addon.scss:
--------------------------------------------------------------------------------
1 | .etw-width-inherit {
2 | width: inherit;
3 | }
4 | .etw-transition {
5 | transition: all 0.15s;
6 | }
7 |
--------------------------------------------------------------------------------
/config/environment.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | module.exports = function(/* environment, appConfig */) {
4 | return { };
5 | };
6 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/addon/styles/addon.css:
--------------------------------------------------------------------------------
1 | .text-secondary {
2 | color: orange;
3 | }
4 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/app/templates/application.hbs:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/public/robots.txt:
--------------------------------------------------------------------------------
1 | # http://www.robotstxt.org
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-app/public/robots.txt:
--------------------------------------------------------------------------------
1 | # http://www.robotstxt.org
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/.watchmanconfig:
--------------------------------------------------------------------------------
1 | {
2 | "ignore_dirs": ["tmp", "dist"]
3 | }
4 |
--------------------------------------------------------------------------------
/app/services/etw-tailwind-styleguide.js:
--------------------------------------------------------------------------------
1 | import Service from '@ember/service';
2 |
3 | export default Service.extend({
4 | // body
5 | });
6 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/app/resolver.js:
--------------------------------------------------------------------------------
1 | import Resolver from 'ember-resolver';
2 |
3 | export default Resolver;
4 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | module.exports = {
4 | name: 'sample-addon'
5 | };
6 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | module.exports = {
4 | name: 'sample-addon'
5 | };
6 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/tests/dummy/public/robots.txt:
--------------------------------------------------------------------------------
1 | # http://www.robotstxt.org
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/app/components/etw/module-section.js:
--------------------------------------------------------------------------------
1 | import Component from '@ember/component';
2 |
3 | export default Component.extend({
4 | tagName: '',
5 | });
6 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/addon/templates/components/ui-title.hbs:
--------------------------------------------------------------------------------
1 |
2 | {{yield}}
3 |
4 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/app/components/ui-button.js:
--------------------------------------------------------------------------------
1 | export { default } from 'sample-addon/components/ui-button';
2 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/app/components/ui-title.js:
--------------------------------------------------------------------------------
1 | export { default } from 'sample-addon/components/ui-title';
2 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/tests/dummy/public/robots.txt:
--------------------------------------------------------------------------------
1 | # http://www.robotstxt.org
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-app/app/resolver.js:
--------------------------------------------------------------------------------
1 | import Resolver from 'ember-resolver';
2 |
3 | export default Resolver;
4 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon/tests/dummy/public/robots.txt:
--------------------------------------------------------------------------------
1 | # http://www.robotstxt.org
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/addon/styles/addon.scss:
--------------------------------------------------------------------------------
1 | @import 'tailwind';
2 |
3 | .some-title {
4 | @extend .text-brand;
5 | }
6 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/tests/dummy/app/resolver.js:
--------------------------------------------------------------------------------
1 | import Resolver from 'ember-resolver';
2 |
3 | export default Resolver;
4 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon/tests/dummy/app/resolver.js:
--------------------------------------------------------------------------------
1 | import Resolver from 'ember-resolver';
2 |
3 | export default Resolver;
4 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/tests/dummy/app/resolver.js:
--------------------------------------------------------------------------------
1 | import Resolver from 'ember-resolver';
2 |
3 | export default Resolver;
4 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/addon/templates/components/ui-title.hbs:
--------------------------------------------------------------------------------
1 |
2 | {{yield}}
3 |
4 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/tests/dummy/public/robots.txt:
--------------------------------------------------------------------------------
1 | # http://www.robotstxt.org
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/app/components/ui-button.js:
--------------------------------------------------------------------------------
1 | export { default } from 'sample-addon-with-tailwind/components/ui-button';
2 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/app/components/ui-title.js:
--------------------------------------------------------------------------------
1 | export { default } from 'sample-addon-with-tailwind/components/ui-title';
2 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/tests/dummy/app/resolver.js:
--------------------------------------------------------------------------------
1 | import Resolver from 'ember-resolver';
2 |
3 | export default Resolver;
4 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Change log
2 |
3 | Releases (along with upgrade instructions) are documented on the Github [Releases](https://github.com/embermap/ember-cli-tailwind/releases) page.
4 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/config/environment.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | module.exports = function(/* environment, appConfig */) {
4 | return { };
5 | };
6 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/config/environment.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | module.exports = function(/* environment, appConfig */) {
4 | return { };
5 | };
6 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon/config/environment.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | module.exports = function(/* environment, appConfig */) {
4 | return { };
5 | };
6 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/config/environment.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | module.exports = function(/* environment, appConfig */) {
4 | return { };
5 | };
6 |
--------------------------------------------------------------------------------
/node-tests/fixtures/app-with-components/tailwind/modules.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss/preflight";
2 | @import "tailwindcss/components";
3 | @import "./components/*.css";
4 | @import "tailwindcss/utilities";
5 |
--------------------------------------------------------------------------------
/node-tests/fixtures/app-with-tailwind/tailwind/modules.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss/preflight";
2 | @import "tailwindcss/components";
3 | @import "./components/*.css";
4 | @import "tailwindcss/utilities";
5 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/tests/dummy/app/templates/application.hbs:
--------------------------------------------------------------------------------
1 |
2 | My addon can provide Sass that extends my custom Tailwind build
3 |
4 |
--------------------------------------------------------------------------------
/node-tests/fixtures/app-with-components/tailwind/components/button.css:
--------------------------------------------------------------------------------
1 | .btn-blue {
2 | @apply .bg-blue .text-ember-red .font-bold .py-2 .px-4 .rounded;
3 | }
4 | .btn-blue:hover {
5 | @apply .bg-blue-dark;
6 | }
7 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon/tests/dummy/app/templates/application.hbs:
--------------------------------------------------------------------------------
1 | {{#ui-title}}
2 | Sample addon that depends on sample-addon-with-tailwind
3 | {{/ui-title}}
4 |
5 | {{outlet}}
6 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/tests/helpers/destroy-app.js:
--------------------------------------------------------------------------------
1 | import { run } from '@ember/runloop';
2 |
3 | export default function destroyApp(application) {
4 | run(application, 'destroy');
5 | }
6 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-app/app/templates/application.hbs:
--------------------------------------------------------------------------------
1 | {{#ui-title}}
2 | Sample app
3 | {{/ui-title}}
4 |
5 | {{#ui-button}}
6 | Click me
7 | {{/ui-button}}
8 |
9 | {{outlet}}
10 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-app/tests/helpers/destroy-app.js:
--------------------------------------------------------------------------------
1 | import { run } from '@ember/runloop';
2 |
3 | export default function destroyApp(application) {
4 | run(application, 'destroy');
5 | }
6 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon/tests/helpers/destroy-app.js:
--------------------------------------------------------------------------------
1 | import { run } from '@ember/runloop';
2 |
3 | export default function destroyApp(application) {
4 | run(application, 'destroy');
5 | }
6 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/tests/helpers/destroy-app.js:
--------------------------------------------------------------------------------
1 | import { run } from '@ember/runloop';
2 |
3 | export default function destroyApp(application) {
4 | run(application, 'destroy');
5 | }
6 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/tests/helpers/destroy-app.js:
--------------------------------------------------------------------------------
1 | import { run } from '@ember/runloop';
2 |
3 | export default function destroyApp(application) {
4 | run(application, 'destroy');
5 | }
6 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/tests/helpers/destroy-app.js:
--------------------------------------------------------------------------------
1 | import { run } from '@ember/runloop';
2 |
3 | export default function destroyApp(application) {
4 | run(application, 'destroy');
5 | }
6 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/config/targets.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | browsers: [
3 | 'ie 9',
4 | 'last 1 Chrome versions',
5 | 'last 1 Firefox versions',
6 | 'last 1 Safari versions'
7 | ]
8 | };
9 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-app/config/targets.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | browsers: [
3 | 'ie 9',
4 | 'last 1 Chrome versions',
5 | 'last 1 Firefox versions',
6 | 'last 1 Safari versions'
7 | ]
8 | };
9 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/tests/dummy/app/templates/application.hbs:
--------------------------------------------------------------------------------
1 | {{#ui-title}}
2 | Welcome to Ember
3 | {{/ui-title}}
4 |
5 | {{#ui-button}}
6 | Click me
7 | {{/ui-button}}
8 |
9 | {{outlet}}
10 |
--------------------------------------------------------------------------------
/node-tests/fixtures/app-with-components/tailwind/config/tailwind.js:
--------------------------------------------------------------------------------
1 | export default {
2 | textColors: {
3 | 'ember-red': '#E04E39'
4 | },
5 |
6 | options: {
7 | prefix: '',
8 | important: false,
9 | separator: ':'
10 | }
11 | };
12 |
--------------------------------------------------------------------------------
/node-tests/fixtures/app-with-tailwind/tailwind/config/tailwind.js:
--------------------------------------------------------------------------------
1 | export default {
2 | textColors: {
3 | 'ember-red': '#E04E39'
4 | },
5 |
6 | options: {
7 | prefix: '',
8 | important: false,
9 | separator: ':'
10 | }
11 | };
12 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | # unconventional js
2 | /blueprints/*/files/
3 | /vendor/
4 |
5 | # compiled output
6 | /dist/
7 | /tmp/
8 |
9 | # dependencies
10 | /bower_components/
11 |
12 | # misc
13 | /coverage/
14 |
15 | # ember-try
16 | /.node_modules.ember-try/
17 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/addon/components/ui-title.js:
--------------------------------------------------------------------------------
1 | import Component from '@ember/component';
2 | import layout from '../templates/components/ui-title';
3 |
4 | export default Component.extend({
5 | layout,
6 | tagName: ''
7 | });
8 |
--------------------------------------------------------------------------------
/tests/test-helper.js:
--------------------------------------------------------------------------------
1 | import Application from '../app';
2 | import config from '../config/environment';
3 | import { setApplication } from '@ember/test-helpers';
4 | import { start } from 'ember-qunit';
5 |
6 | setApplication(Application.create(config.APP));
7 |
8 | start();
9 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/addon/components/ui-title.js:
--------------------------------------------------------------------------------
1 | import Component from '@ember/component';
2 | import layout from '../templates/components/ui-title';
3 |
4 | export default Component.extend({
5 | layout,
6 | tagName: ''
7 | });
8 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/addon/components/ui-button.js:
--------------------------------------------------------------------------------
1 | import Component from '@ember/component';
2 | import layout from '../templates/components/ui-button';
3 |
4 | export default Component.extend({
5 | layout,
6 | tagName: 'button',
7 | classNames: 'btn'
8 | });
9 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/addon/components/ui-button.js:
--------------------------------------------------------------------------------
1 | import Component from '@ember/component';
2 | import layout from '../templates/components/ui-button';
3 |
4 | export default Component.extend({
5 | layout,
6 | tagName: 'button',
7 | classNames: 'btn'
8 | });
9 |
--------------------------------------------------------------------------------
/tests/dummy/app/router.js:
--------------------------------------------------------------------------------
1 | import EmberRouter from '@ember/routing/router';
2 | import config from './config/environment';
3 |
4 | const Router = EmberRouter.extend({
5 | location: config.locationType,
6 | rootURL: config.rootURL
7 | });
8 |
9 | Router.map(function() {
10 | });
11 |
12 | export default Router;
13 |
--------------------------------------------------------------------------------
/.ember-cli:
--------------------------------------------------------------------------------
1 | {
2 | /**
3 | Ember CLI sends analytics information by default. The data is completely
4 | anonymous, but there are times when you might want to disable this behavior.
5 |
6 | Setting `disableAnalytics` to true will prevent any data from being sent.
7 | */
8 | "disableAnalytics": false
9 | }
10 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/tests/test-helper.js:
--------------------------------------------------------------------------------
1 | import Application from '../app';
2 | import config from '../config/environment';
3 | import { setApplication } from '@ember/test-helpers';
4 | import { start } from 'ember-qunit';
5 |
6 | setApplication(Application.create(config.APP));
7 |
8 | start();
9 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-app/tests/test-helper.js:
--------------------------------------------------------------------------------
1 | import Application from '../app';
2 | import config from '../config/environment';
3 | import { setApplication } from '@ember/test-helpers';
4 | import { start } from 'ember-qunit';
5 |
6 | setApplication(Application.create(config.APP));
7 |
8 | start();
9 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | module.exports = {
4 | name: 'sample-addon-with-tailwind',
5 |
6 | config() {
7 | return {
8 | 'ember-cli-tailwind': {
9 | shouldIncludeStyleguide: false
10 | }
11 | };
12 | }
13 | };
14 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon/tests/test-helper.js:
--------------------------------------------------------------------------------
1 | import Application from '../app';
2 | import config from '../config/environment';
3 | import { setApplication } from '@ember/test-helpers';
4 | import { start } from 'ember-qunit';
5 |
6 | setApplication(Application.create(config.APP));
7 |
8 | start();
9 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/tests/test-helper.js:
--------------------------------------------------------------------------------
1 | import Application from '../app';
2 | import config from '../config/environment';
3 | import { setApplication } from '@ember/test-helpers';
4 | import { start } from 'ember-qunit';
5 |
6 | setApplication(Application.create(config.APP));
7 |
8 | start();
9 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/tests/test-helper.js:
--------------------------------------------------------------------------------
1 | import Application from '../app';
2 | import config from '../config/environment';
3 | import { setApplication } from '@ember/test-helpers';
4 | import { start } from 'ember-qunit';
5 |
6 | setApplication(Application.create(config.APP));
7 |
8 | start();
9 |
--------------------------------------------------------------------------------
/tests/dummy/app/tailwind/utilities/your-utility.css:
--------------------------------------------------------------------------------
1 | /**
2 | * You can create new utilities here.
3 | *
4 | * Feel free to rename this file, define multiple utilities here, or make
5 | * any other files in this directory.
6 |
7 | * Here's an example:
8 | **/
9 |
10 | /* .skew-45 {
11 | transform: skewY(45deg);
12 | } */
13 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/tests/dummy/app/templates/application.hbs:
--------------------------------------------------------------------------------
1 | {{#ui-title}}
2 | Welcome to Ember
3 | {{/ui-title}}
4 |
5 | {{#ui-button}}
6 | Click me
7 | {{/ui-button}}
8 |
9 |
10 | My addon's classes should come after Tailwind's
11 |
12 |
13 | {{outlet}}
14 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/tests/test-helper.js:
--------------------------------------------------------------------------------
1 | import Application from '../app';
2 | import config from '../config/environment';
3 | import { setApplication } from '@ember/test-helpers';
4 | import { start } from 'ember-qunit';
5 |
6 | setApplication(Application.create(config.APP));
7 |
8 | start();
9 |
--------------------------------------------------------------------------------
/blueprints/ember-cli-tailwind/files/__root__/tailwind/utilities/your-utility.css:
--------------------------------------------------------------------------------
1 | /**
2 | * You can create new utilities here.
3 | *
4 | * Feel free to rename this file, define multiple utilities here, or make
5 | * any other files in this directory.
6 |
7 | * Here's an example:
8 | **/
9 |
10 | /* .skew-45 {
11 | transform: skewY(45deg);
12 | } */
13 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/app/router.js:
--------------------------------------------------------------------------------
1 | import EmberRouter from '@ember/routing/router';
2 | import config from './config/environment';
3 |
4 | const Router = EmberRouter.extend({
5 | location: config.locationType,
6 | rootURL: config.rootURL
7 | });
8 |
9 | Router.map(function() {
10 | });
11 |
12 | export default Router;
13 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-app/app/router.js:
--------------------------------------------------------------------------------
1 | import EmberRouter from '@ember/routing/router';
2 | import config from './config/environment';
3 |
4 | const Router = EmberRouter.extend({
5 | location: config.locationType,
6 | rootURL: config.rootURL
7 | });
8 |
9 | Router.map(function() {
10 | });
11 |
12 | export default Router;
13 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/app/tailwind/utilities/your-utility.css:
--------------------------------------------------------------------------------
1 | /**
2 | * You can create new utilities here.
3 | *
4 | * Feel free to rename this file, define multiple utilities here, or make
5 | * any other files in this directory.
6 |
7 | * Here's an example:
8 | **/
9 |
10 | /* .skew-45 {
11 | transform: skewY(45deg);
12 | } */
13 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/addon/tailwind/utilities/your-utility.css:
--------------------------------------------------------------------------------
1 | /**
2 | * You can create new utilities here.
3 | *
4 | * Feel free to rename this file, define multiple utilities here, or make
5 | * any other files in this directory.
6 |
7 | * Here's an example:
8 | **/
9 |
10 | /* .skew-45 {
11 | transform: skewY(45deg);
12 | } */
13 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/tests/dummy/app/router.js:
--------------------------------------------------------------------------------
1 | import EmberRouter from '@ember/routing/router';
2 | import config from './config/environment';
3 |
4 | const Router = EmberRouter.extend({
5 | location: config.locationType,
6 | rootURL: config.rootURL
7 | });
8 |
9 | Router.map(function() {
10 | });
11 |
12 | export default Router;
13 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/.ember-cli:
--------------------------------------------------------------------------------
1 | {
2 | /**
3 | Ember CLI sends analytics information by default. The data is completely
4 | anonymous, but there are times when you might want to disable this behavior.
5 |
6 | Setting `disableAnalytics` to true will prevent any data from being sent.
7 | */
8 | "disableAnalytics": false
9 | }
10 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/addon/tailwind/utilities/your-utility.css:
--------------------------------------------------------------------------------
1 | /**
2 | * You can create new utilities here.
3 | *
4 | * Feel free to rename this file, define multiple utilities here, or make
5 | * any other files in this directory.
6 |
7 | * Here's an example:
8 | **/
9 |
10 | /* .skew-45 {
11 | transform: skewY(45deg);
12 | } */
13 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/tests/dummy/app/router.js:
--------------------------------------------------------------------------------
1 | import EmberRouter from '@ember/routing/router';
2 | import config from './config/environment';
3 |
4 | const Router = EmberRouter.extend({
5 | location: config.locationType,
6 | rootURL: config.rootURL
7 | });
8 |
9 | Router.map(function() {
10 | });
11 |
12 | export default Router;
13 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-app/.ember-cli:
--------------------------------------------------------------------------------
1 | {
2 | /**
3 | Ember CLI sends analytics information by default. The data is completely
4 | anonymous, but there are times when you might want to disable this behavior.
5 |
6 | Setting `disableAnalytics` to true will prevent any data from being sent.
7 | */
8 | "disableAnalytics": false
9 | }
10 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon/tests/dummy/app/router.js:
--------------------------------------------------------------------------------
1 | import EmberRouter from '@ember/routing/router';
2 | import config from './config/environment';
3 |
4 | const Router = EmberRouter.extend({
5 | location: config.locationType,
6 | rootURL: config.rootURL
7 | });
8 |
9 | Router.map(function() {
10 | });
11 |
12 | export default Router;
13 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/.ember-cli:
--------------------------------------------------------------------------------
1 | {
2 | /**
3 | Ember CLI sends analytics information by default. The data is completely
4 | anonymous, but there are times when you might want to disable this behavior.
5 |
6 | Setting `disableAnalytics` to true will prevent any data from being sent.
7 | */
8 | "disableAnalytics": false
9 | }
10 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/.ember-cli:
--------------------------------------------------------------------------------
1 | {
2 | /**
3 | Ember CLI sends analytics information by default. The data is completely
4 | anonymous, but there are times when you might want to disable this behavior.
5 |
6 | Setting `disableAnalytics` to true will prevent any data from being sent.
7 | */
8 | "disableAnalytics": false
9 | }
10 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon/.ember-cli:
--------------------------------------------------------------------------------
1 | {
2 | /**
3 | Ember CLI sends analytics information by default. The data is completely
4 | anonymous, but there are times when you might want to disable this behavior.
5 |
6 | Setting `disableAnalytics` to true will prevent any data from being sent.
7 | */
8 | "disableAnalytics": false
9 | }
10 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/tests/dummy/app/router.js:
--------------------------------------------------------------------------------
1 | import EmberRouter from '@ember/routing/router';
2 | import config from './config/environment';
3 |
4 | const Router = EmberRouter.extend({
5 | location: config.locationType,
6 | rootURL: config.rootURL
7 | });
8 |
9 | Router.map(function() {
10 | });
11 |
12 | export default Router;
13 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/.ember-cli:
--------------------------------------------------------------------------------
1 | {
2 | /**
3 | Ember CLI sends analytics information by default. The data is completely
4 | anonymous, but there are times when you might want to disable this behavior.
5 |
6 | Setting `disableAnalytics` to true will prevent any data from being sent.
7 | */
8 | "disableAnalytics": false
9 | }
10 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/addon/tailwind/utilities/your-utility.css:
--------------------------------------------------------------------------------
1 | /**
2 | * You can create new utilities here.
3 | *
4 | * Feel free to rename this file, define multiple utilities here, or make
5 | * any other files in this directory.
6 |
7 | * Here's an example:
8 | **/
9 |
10 | /* .skew-45 {
11 | transform: skewY(45deg);
12 | } */
13 |
--------------------------------------------------------------------------------
/tests/dummy/config/targets.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const browsers = [
4 | 'last 1 Chrome versions',
5 | 'last 1 Firefox versions',
6 | 'last 1 Safari versions'
7 | ];
8 |
9 | const isCI = !!process.env.CI;
10 | const isProduction = process.env.EMBER_ENV === 'production';
11 |
12 | if (isCI || isProduction) {
13 | browsers.push('ie 11');
14 | }
15 |
16 | module.exports = {
17 | browsers
18 | };
19 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/app/tailwind/components/your-component.css:
--------------------------------------------------------------------------------
1 | /**
2 | * You can create Tailwind components using @apply here.
3 | *
4 | * Feel free to rename this file, define multiple components here, or make
5 | * any other files in this directory.
6 |
7 | * Here's an example:
8 | **/
9 |
10 | .btn {
11 | @apply .bg-brand .text-white .font-bold .py-2 .px-4 .rounded;
12 | }
13 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/addon/tailwind/components/your-component.css:
--------------------------------------------------------------------------------
1 | /**
2 | * You can create Tailwind components using @apply here.
3 | *
4 | * Feel free to rename this file, define multiple components here, or make
5 | * any other files in this directory.
6 |
7 | * Here's an example:
8 | **/
9 |
10 | .btn {
11 | @apply .bg-brand .text-white .font-bold .py-2 .px-4 .rounded;
12 | }
13 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/addon/tailwind/components/your-component.css:
--------------------------------------------------------------------------------
1 | /**
2 | * You can create Tailwind components using @apply here.
3 | *
4 | * Feel free to rename this file, define multiple components here, or make
5 | * any other files in this directory.
6 |
7 | * Here's an example:
8 | **/
9 |
10 | .btn {
11 | @apply .bg-brand .text-white .font-bold .py-2 .px-4 .rounded;
12 | }
13 |
--------------------------------------------------------------------------------
/.dependabot/config.yml:
--------------------------------------------------------------------------------
1 | version: 1
2 |
3 | update_configs:
4 | - package_manager: "javascript"
5 | directory: "/"
6 | update_schedule: "daily"
7 | automerged_updates:
8 | - match:
9 | dependency_type: "all"
10 | update_type: "in_range"
11 | ignored_updates:
12 | - match:
13 | dependency_name: "ember-cli"
14 | - match:
15 | dependency_name: "tailwindcss"
16 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | /bower_components
2 | /config/ember-try.js
3 | /dist
4 | /tests
5 | /tmp
6 | **/.gitkeep
7 | .bowerrc
8 | .editorconfig
9 | .ember-cli
10 | .eslintrc.js
11 | .gitignore
12 | .watchmanconfig
13 | .travis.yml
14 | bower.json
15 | ember-cli-build.js
16 | testem.js
17 | yarn.lock
18 | DEBUG
19 |
20 | # ember-try
21 | .node_modules.ember-try/
22 | bower.json.ember-try
23 | package.json.ember-try
24 |
25 | /test-projects
26 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/.npmignore:
--------------------------------------------------------------------------------
1 | /bower_components
2 | /config/ember-try.js
3 | /dist
4 | /tests
5 | /tmp
6 | **/.gitkeep
7 | .bowerrc
8 | .editorconfig
9 | .ember-cli
10 | .eslintrc.js
11 | .gitignore
12 | .watchmanconfig
13 | .travis.yml
14 | bower.json
15 | ember-cli-build.js
16 | testem.js
17 |
18 | # ember-try
19 | .node_modules.ember-try/
20 | bower.json.ember-try
21 | package.json.ember-try
22 |
--------------------------------------------------------------------------------
/tests/acceptance/index-test.js:
--------------------------------------------------------------------------------
1 | import { visit } from '@ember/test-helpers';
2 | import { module, test } from 'qunit';
3 | import { setupApplicationTest } from 'ember-qunit';
4 |
5 | module('Acceptance | index', function(hooks) {
6 | setupApplicationTest(hooks);
7 |
8 | test('visiting /index', async function(assert) {
9 | await visit('/');
10 |
11 | assert.dom('h1').hasText('I am the Dummy app');
12 | });
13 | });
14 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/.npmignore:
--------------------------------------------------------------------------------
1 | /bower_components
2 | /config/ember-try.js
3 | /dist
4 | /tests
5 | /tmp
6 | **/.gitkeep
7 | .bowerrc
8 | .editorconfig
9 | .ember-cli
10 | .eslintrc.js
11 | .gitignore
12 | .watchmanconfig
13 | .travis.yml
14 | bower.json
15 | ember-cli-build.js
16 | testem.js
17 |
18 | # ember-try
19 | .node_modules.ember-try/
20 | bower.json.ember-try
21 | package.json.ember-try
22 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon/.npmignore:
--------------------------------------------------------------------------------
1 | /bower_components
2 | /config/ember-try.js
3 | /dist
4 | /tests
5 | /tmp
6 | **/.gitkeep
7 | .bowerrc
8 | .editorconfig
9 | .ember-cli
10 | .eslintrc.js
11 | .gitignore
12 | .watchmanconfig
13 | .travis.yml
14 | bower.json
15 | ember-cli-build.js
16 | testem.js
17 |
18 | # ember-try
19 | .node_modules.ember-try/
20 | bower.json.ember-try
21 | package.json.ember-try
22 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/addon/tailwind/components/your-component.css:
--------------------------------------------------------------------------------
1 | /**
2 | * You can create Tailwind components using @apply here.
3 | *
4 | * Feel free to rename this file, define multiple components here, or make
5 | * any other files in this directory.
6 |
7 | * Here's an example:
8 | **/
9 |
10 | .btn {
11 | @apply .bg-brand .text-white .font-bold .py-2 .px-4 .rounded;
12 | }
13 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/.npmignore:
--------------------------------------------------------------------------------
1 | /bower_components
2 | /config/ember-try.js
3 | /dist
4 | /tests
5 | /tmp
6 | **/.gitkeep
7 | .bowerrc
8 | .editorconfig
9 | .ember-cli
10 | .eslintrc.js
11 | .gitignore
12 | .watchmanconfig
13 | .travis.yml
14 | bower.json
15 | ember-cli-build.js
16 | testem.js
17 |
18 | # ember-try
19 | .node_modules.ember-try/
20 | bower.json.ember-try
21 | package.json.ember-try
22 |
--------------------------------------------------------------------------------
/tests/dummy/app/app.js:
--------------------------------------------------------------------------------
1 | import Application from '@ember/application';
2 | import Resolver from './resolver';
3 | import loadInitializers from 'ember-load-initializers';
4 | import config from './config/environment';
5 |
6 | const App = Application.extend({
7 | modulePrefix: config.modulePrefix,
8 | podModulePrefix: config.podModulePrefix,
9 | Resolver
10 | });
11 |
12 | loadInitializers(App, config.modulePrefix);
13 |
14 | export default App;
15 |
--------------------------------------------------------------------------------
/tests/dummy/app/tailwind/components/your-component.css:
--------------------------------------------------------------------------------
1 | /**
2 | * You can create Tailwind components using @apply here.
3 | *
4 | * Feel free to rename this file, define multiple components here, or make
5 | * any other files in this directory.
6 |
7 | * Here's an example:
8 | **/
9 |
10 | /*
11 | .btn-blue {
12 | @apply .bg-blue .text-white .font-bold .py-2 .px-4 .rounded;
13 | }
14 | .btn-blue:hover {
15 | @apply .bg-blue-dark;
16 | }
17 | */
18 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig helps developers define and maintain consistent
2 | # coding styles between different editors and IDEs
3 | # editorconfig.org
4 |
5 | root = true
6 |
7 |
8 | [*]
9 | end_of_line = lf
10 | charset = utf-8
11 | trim_trailing_whitespace = true
12 | insert_final_newline = true
13 | indent_style = space
14 | indent_size = 2
15 |
16 | [*.hbs]
17 | insert_final_newline = false
18 |
19 | [*.{diff,md}]
20 | trim_trailing_whitespace = false
21 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon/tests/dummy/config/targets.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const browsers = [
4 | 'last 1 Chrome versions',
5 | 'last 1 Firefox versions',
6 | 'last 1 Safari versions'
7 | ];
8 |
9 | const isCI = !!process.env.CI;
10 | const isProduction = process.env.EMBER_ENV === 'production';
11 |
12 | if (isCI || isProduction) {
13 | browsers.push('ie 11');
14 | }
15 |
16 | module.exports = {
17 | browsers
18 | };
19 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/tests/dummy/config/targets.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const browsers = [
4 | 'last 1 Chrome versions',
5 | 'last 1 Firefox versions',
6 | 'last 1 Safari versions'
7 | ];
8 |
9 | const isCI = !!process.env.CI;
10 | const isProduction = process.env.EMBER_ENV === 'production';
11 |
12 | if (isCI || isProduction) {
13 | browsers.push('ie 11');
14 | }
15 |
16 | module.exports = {
17 | browsers
18 | };
19 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/tests/dummy/config/targets.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const browsers = [
4 | 'last 1 Chrome versions',
5 | 'last 1 Firefox versions',
6 | 'last 1 Safari versions'
7 | ];
8 |
9 | const isCI = !!process.env.CI;
10 | const isProduction = process.env.EMBER_ENV === 'production';
11 |
12 | if (isCI || isProduction) {
13 | browsers.push('ie 11');
14 | }
15 |
16 | module.exports = {
17 | browsers
18 | };
19 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/.travis.yml:
--------------------------------------------------------------------------------
1 | ---
2 | language: node_js
3 | node_js:
4 | - "6"
5 |
6 | sudo: false
7 | dist: trusty
8 |
9 | addons:
10 | chrome: stable
11 |
12 | cache:
13 | directories:
14 | - $HOME/.npm
15 |
16 | env:
17 | global:
18 | # See https://git.io/vdao3 for details.
19 | - JOBS=1
20 |
21 | before_install:
22 | - npm config set spin false
23 |
24 | script:
25 | - npm run lint:js
26 | - npm test
27 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-app/.travis.yml:
--------------------------------------------------------------------------------
1 | ---
2 | language: node_js
3 | node_js:
4 | - "6"
5 |
6 | sudo: false
7 | dist: trusty
8 |
9 | addons:
10 | chrome: stable
11 |
12 | cache:
13 | directories:
14 | - $HOME/.npm
15 |
16 | env:
17 | global:
18 | # See https://git.io/vdao3 for details.
19 | - JOBS=1
20 |
21 | before_install:
22 | - npm config set spin false
23 |
24 | script:
25 | - npm run lint:js
26 | - npm test
27 |
--------------------------------------------------------------------------------
/tests/acceptance/tailwind-test.js:
--------------------------------------------------------------------------------
1 | import { visit } from '@ember/test-helpers';
2 | import { module, skip } from 'qunit';
3 | import { setupApplicationTest } from 'ember-qunit';
4 |
5 | module('Acceptance | tailwind styleguide', function(hooks) {
6 | setupApplicationTest(hooks);
7 |
8 | skip('The Tailwind styleguide renders', async function(assert) {
9 | await visit('/tailwind');
10 |
11 | assert.dom('h1').hasText('Your Tailwind styles');
12 | });
13 | });
14 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/tests/dummy/config/targets.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const browsers = [
4 | 'last 1 Chrome versions',
5 | 'last 1 Firefox versions',
6 | 'last 1 Safari versions'
7 | ];
8 |
9 | const isCI = !!process.env.CI;
10 | const isProduction = process.env.EMBER_ENV === 'production';
11 |
12 | if (isCI || isProduction) {
13 | browsers.push('ie 11');
14 | }
15 |
16 | module.exports = {
17 | browsers
18 | };
19 |
--------------------------------------------------------------------------------
/blueprints/ember-cli-tailwind/files/__root__/tailwind/components/your-component.css:
--------------------------------------------------------------------------------
1 | /**
2 | * You can create Tailwind components using @apply here.
3 | *
4 | * Feel free to rename this file, define multiple components here, or make
5 | * any other files in this directory.
6 |
7 | * Here's an example:
8 | **/
9 |
10 | /*
11 | .btn-blue {
12 | @apply .bg-blue .text-white .font-bold .py-2 .px-4 .rounded;
13 | }
14 | .btn-blue:hover {
15 | @apply .bg-blue-dark;
16 | }
17 | */
18 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/app/app.js:
--------------------------------------------------------------------------------
1 | import Application from '@ember/application';
2 | import Resolver from './resolver';
3 | import loadInitializers from 'ember-load-initializers';
4 | import config from './config/environment';
5 |
6 | const App = Application.extend({
7 | modulePrefix: config.modulePrefix,
8 | podModulePrefix: config.podModulePrefix,
9 | Resolver
10 | });
11 |
12 | loadInitializers(App, config.modulePrefix);
13 |
14 | export default App;
15 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-app/app/app.js:
--------------------------------------------------------------------------------
1 | import Application from '@ember/application';
2 | import Resolver from './resolver';
3 | import loadInitializers from 'ember-load-initializers';
4 | import config from './config/environment';
5 |
6 | const App = Application.extend({
7 | modulePrefix: config.modulePrefix,
8 | podModulePrefix: config.podModulePrefix,
9 | Resolver
10 | });
11 |
12 | loadInitializers(App, config.modulePrefix);
13 |
14 | export default App;
15 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/tests/dummy/app/app.js:
--------------------------------------------------------------------------------
1 | import Application from '@ember/application';
2 | import Resolver from './resolver';
3 | import loadInitializers from 'ember-load-initializers';
4 | import config from './config/environment';
5 |
6 | const App = Application.extend({
7 | modulePrefix: config.modulePrefix,
8 | podModulePrefix: config.podModulePrefix,
9 | Resolver
10 | });
11 |
12 | loadInitializers(App, config.modulePrefix);
13 |
14 | export default App;
15 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /tmp
6 |
7 | # dependencies
8 | /node_modules
9 | /bower_components
10 |
11 | # misc
12 | /.sass-cache
13 | /connect.lock
14 | /coverage/*
15 | /libpeerconnection.log
16 | npm-debug.log*
17 | yarn-error.log
18 | testem.log
19 |
20 | # ember-try
21 | .node_modules.ember-try/
22 | bower.json.ember-try
23 | package.json.ember-try
24 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/tests/dummy/app/app.js:
--------------------------------------------------------------------------------
1 | import Application from '@ember/application';
2 | import Resolver from './resolver';
3 | import loadInitializers from 'ember-load-initializers';
4 | import config from './config/environment';
5 |
6 | const App = Application.extend({
7 | modulePrefix: config.modulePrefix,
8 | podModulePrefix: config.podModulePrefix,
9 | Resolver
10 | });
11 |
12 | loadInitializers(App, config.modulePrefix);
13 |
14 | export default App;
15 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon/tests/dummy/app/app.js:
--------------------------------------------------------------------------------
1 | import Application from '@ember/application';
2 | import Resolver from './resolver';
3 | import loadInitializers from 'ember-load-initializers';
4 | import config from './config/environment';
5 |
6 | const App = Application.extend({
7 | modulePrefix: config.modulePrefix,
8 | podModulePrefix: config.podModulePrefix,
9 | Resolver
10 | });
11 |
12 | loadInitializers(App, config.modulePrefix);
13 |
14 | export default App;
15 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /tmp
6 |
7 | # dependencies
8 | /node_modules
9 | /bower_components
10 |
11 | # misc
12 | /.sass-cache
13 | /connect.lock
14 | /coverage/*
15 | /libpeerconnection.log
16 | npm-debug.log*
17 | yarn-error.log
18 | testem.log
19 |
20 | # ember-try
21 | .node_modules.ember-try/
22 | bower.json.ember-try
23 | package.json.ember-try
24 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /tmp
6 |
7 | # dependencies
8 | /node_modules
9 | /bower_components
10 |
11 | # misc
12 | /.sass-cache
13 | /connect.lock
14 | /coverage/*
15 | /libpeerconnection.log
16 | npm-debug.log*
17 | yarn-error.log
18 | testem.log
19 |
20 | # ember-try
21 | .node_modules.ember-try/
22 | bower.json.ember-try
23 | package.json.ember-try
24 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-app/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /tmp
6 |
7 | # dependencies
8 | /node_modules
9 | /bower_components
10 |
11 | # misc
12 | /.sass-cache
13 | /connect.lock
14 | /coverage/*
15 | /libpeerconnection.log
16 | npm-debug.log*
17 | yarn-error.log
18 | testem.log
19 |
20 | # ember-try
21 | .node_modules.ember-try/
22 | bower.json.ember-try
23 | package.json.ember-try
24 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /tmp
6 |
7 | # dependencies
8 | /node_modules
9 | /bower_components
10 |
11 | # misc
12 | /.sass-cache
13 | /connect.lock
14 | /coverage/*
15 | /libpeerconnection.log
16 | npm-debug.log*
17 | yarn-error.log
18 | testem.log
19 |
20 | # ember-try
21 | .node_modules.ember-try/
22 | bower.json.ember-try
23 | package.json.ember-try
24 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig helps developers define and maintain consistent
2 | # coding styles between different editors and IDEs
3 | # editorconfig.org
4 |
5 | root = true
6 |
7 |
8 | [*]
9 | end_of_line = lf
10 | charset = utf-8
11 | trim_trailing_whitespace = true
12 | insert_final_newline = true
13 | indent_style = space
14 | indent_size = 2
15 |
16 | [*.hbs]
17 | insert_final_newline = false
18 |
19 | [*.{diff,md}]
20 | trim_trailing_whitespace = false
21 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig helps developers define and maintain consistent
2 | # coding styles between different editors and IDEs
3 | # editorconfig.org
4 |
5 | root = true
6 |
7 |
8 | [*]
9 | end_of_line = lf
10 | charset = utf-8
11 | trim_trailing_whitespace = true
12 | insert_final_newline = true
13 | indent_style = space
14 | indent_size = 2
15 |
16 | [*.hbs]
17 | insert_final_newline = false
18 |
19 | [*.{diff,md}]
20 | trim_trailing_whitespace = false
21 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig helps developers define and maintain consistent
2 | # coding styles between different editors and IDEs
3 | # editorconfig.org
4 |
5 | root = true
6 |
7 |
8 | [*]
9 | end_of_line = lf
10 | charset = utf-8
11 | trim_trailing_whitespace = true
12 | insert_final_newline = true
13 | indent_style = space
14 | indent_size = 2
15 |
16 | [*.hbs]
17 | insert_final_newline = false
18 |
19 | [*.{diff,md}]
20 | trim_trailing_whitespace = false
21 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-app/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig helps developers define and maintain consistent
2 | # coding styles between different editors and IDEs
3 | # editorconfig.org
4 |
5 | root = true
6 |
7 |
8 | [*]
9 | end_of_line = lf
10 | charset = utf-8
11 | trim_trailing_whitespace = true
12 | insert_final_newline = true
13 | indent_style = space
14 | indent_size = 2
15 |
16 | [*.hbs]
17 | insert_final_newline = false
18 |
19 | [*.{diff,md}]
20 | trim_trailing_whitespace = false
21 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/tests/dummy/app/app.js:
--------------------------------------------------------------------------------
1 | import Application from '@ember/application';
2 | import Resolver from './resolver';
3 | import loadInitializers from 'ember-load-initializers';
4 | import config from './config/environment';
5 |
6 | const App = Application.extend({
7 | modulePrefix: config.modulePrefix,
8 | podModulePrefix: config.podModulePrefix,
9 | Resolver
10 | });
11 |
12 | loadInitializers(App, config.modulePrefix);
13 |
14 | export default App;
15 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig helps developers define and maintain consistent
2 | # coding styles between different editors and IDEs
3 | # editorconfig.org
4 |
5 | root = true
6 |
7 |
8 | [*]
9 | end_of_line = lf
10 | charset = utf-8
11 | trim_trailing_whitespace = true
12 | insert_final_newline = true
13 | indent_style = space
14 | indent_size = 2
15 |
16 | [*.hbs]
17 | insert_final_newline = false
18 |
19 | [*.{diff,md}]
20 | trim_trailing_whitespace = false
21 |
--------------------------------------------------------------------------------
/app/templates/components/etw/module-section.hbs:
--------------------------------------------------------------------------------
1 |
2 | {{title}}
3 |
4 |
5 | {{#each codeSnippets as |snippet|}}
6 | {{snippet}}
9 |
10 |
11 | {{#each moduleStyles as |moduleStyle|}}
12 | {{etw/module-style-example moduleStyle=moduleStyle}}
13 | {{/each}}
14 |
15 |
16 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /tmp
6 |
7 | # dependencies
8 | /node_modules
9 | /bower_components
10 |
11 | # misc
12 | /.sass-cache
13 | /connect.lock
14 | /coverage/*
15 | /libpeerconnection.log
16 | npm-debug.log*
17 | yarn-error.log
18 | testem.log
19 |
20 | # ember-try
21 | .node_modules.ember-try/
22 | bower.json.ember-try
23 | package.json.ember-try
24 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist/
5 | /tmp/
6 |
7 | # dependencies
8 | /bower_components/
9 | /node_modules/
10 |
11 | # misc
12 | /.sass-cache
13 | /connect.lock
14 | /coverage/
15 | /libpeerconnection.log
16 | /npm-debug.log*
17 | /testem.log
18 | /yarn-error.log
19 | DEBUG
20 |
21 | # ember-try
22 | /.node_modules.ember-try/
23 | /bower.json.ember-try
24 | /package.json.ember-try
25 | /package-lock.json
26 |
27 | # other
28 | jsconfig.json
29 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig helps developers define and maintain consistent
2 | # coding styles between different editors and IDEs
3 | # editorconfig.org
4 |
5 | root = true
6 |
7 |
8 | [*]
9 | end_of_line = lf
10 | charset = utf-8
11 | trim_trailing_whitespace = true
12 | insert_final_newline = true
13 | indent_style = space
14 | indent_size = 2
15 |
16 | [*.hbs]
17 | insert_final_newline = false
18 |
19 | [*.{diff,md}]
20 | trim_trailing_whitespace = false
21 |
--------------------------------------------------------------------------------
/ember-cli-build.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
4 |
5 | module.exports = function(defaults) {
6 | let app = new EmberAddon(defaults, {
7 | });
8 |
9 | /*
10 | This build file specifies the options for the dummy test app of this
11 | addon, located in `/tests/dummy`
12 | This build file does *not* influence how the addon or the app using it
13 | behave. You most likely want to be modifying `./index.js` or app's build file
14 | */
15 |
16 | return app.toTree();
17 | };
18 |
--------------------------------------------------------------------------------
/scripts/test.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 | ./scripts/parallel --tag < {
12 | let application = Application.create(attributes);
13 | application.setupForTesting();
14 | application.injectTestHelpers();
15 | return application;
16 | });
17 | }
18 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-app/tests/helpers/start-app.js:
--------------------------------------------------------------------------------
1 | import Application from '../../app';
2 | import config from '../../config/environment';
3 | import { merge } from '@ember/polyfills';
4 | import { run } from '@ember/runloop';
5 |
6 | export default function startApp(attrs) {
7 | let attributes = merge({}, config.APP);
8 | attributes.autoboot = true;
9 | attributes = merge(attributes, attrs); // use defaults, but you can override;
10 |
11 | return run(() => {
12 | let application = Application.create(attributes);
13 | application.setupForTesting();
14 | application.injectTestHelpers();
15 | return application;
16 | });
17 | }
18 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/testem.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | test_page: 'tests/index.html?hidepassed',
3 | disable_watching: true,
4 | launch_in_ci: [
5 | 'Chrome'
6 | ],
7 | launch_in_dev: [
8 | 'Chrome'
9 | ],
10 | browser_args: {
11 | Chrome: {
12 | mode: 'ci',
13 | args: [
14 | // --no-sandbox is needed when running Chrome inside a container
15 | process.env.TRAVIS ? '--no-sandbox' : null,
16 |
17 | '--disable-gpu',
18 | '--headless',
19 | '--remote-debugging-port=0',
20 | '--window-size=1440,900'
21 | ].filter(Boolean)
22 | }
23 | }
24 | };
25 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/addon/tailwind/config/background-colors.js:
--------------------------------------------------------------------------------
1 | import colors from './colors';
2 |
3 | /*
4 | |-----------------------------------------------------------------------------
5 | | Background colors https://tailwindcss.com/docs/background-color
6 | |-----------------------------------------------------------------------------
7 | |
8 | | Here is where you define your background colors. By default these use
9 | | the color palette we defined above, however you're welcome to set
10 | | these independently if that makes sense for your project.
11 | |
12 | | Class name: .bg-{color}
13 | |
14 | */
15 |
16 | export default colors;
17 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const Merge = require('broccoli-merge-trees');
4 | const buildTailwind = require('ember-cli-tailwind/lib/build-tailwind');
5 |
6 | module.exports = {
7 | name: 'sample-addon',
8 |
9 | config(env, baseConfig) {
10 | return Object.assign({}, baseConfig, {
11 | 'ember-cli-tailwind': {
12 | shouldIncludeStyleguide: false,
13 | shouldBuildTailwind: false
14 | }
15 | });
16 | },
17 |
18 | treeForAddonStyles(tree) {
19 | let trees = tree ? [ tree ] : [];
20 |
21 | trees.push(buildTailwind(this));
22 |
23 | return new Merge(trees);
24 | }
25 | };
26 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/tests/helpers/start-app.js:
--------------------------------------------------------------------------------
1 | import Application from '../../app';
2 | import config from '../../config/environment';
3 | import { merge } from '@ember/polyfills';
4 | import { run } from '@ember/runloop';
5 |
6 | export default function startApp(attrs) {
7 | let attributes = merge({}, config.APP);
8 | attributes.autoboot = true;
9 | attributes = merge(attributes, attrs); // use defaults, but you can override;
10 |
11 | return run(() => {
12 | let application = Application.create(attributes);
13 | application.setupForTesting();
14 | application.injectTestHelpers();
15 | return application;
16 | });
17 | }
18 |
--------------------------------------------------------------------------------
/blueprints/ember-cli-tailwind/files/__root__/tailwind/config/text-colors.js:
--------------------------------------------------------------------------------
1 | import colors from './colors';
2 |
3 | /*
4 | |-----------------------------------------------------------------------------
5 | | Text colors https://tailwindcss.com/docs/text-color
6 | |-----------------------------------------------------------------------------
7 | |
8 | | Here is where you define your text colors. By default these use the
9 | | color palette we defined above, however you're welcome to set these
10 | | independently if that makes sense for your project.
11 | |
12 | | Class name: .text-{color}
13 | | CSS property: color
14 | |
15 | */
16 |
17 | export default colors;
18 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/app/tailwind/config/opacity.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Opacity https://tailwindcss.com/docs/opacity
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your opacity utility values. By default we
7 | | provide a sensible numeric scale. You can, of course, modify these
8 | | values as needed.
9 | |
10 | | Class name: .opacity-{name}
11 | |
12 | */
13 |
14 | export default {
15 | '0': '0',
16 | '25': '.25',
17 | '50': '.5',
18 | '75': '.75',
19 | '100': '1'
20 | };
21 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/addon/tailwind/config/background-colors.js:
--------------------------------------------------------------------------------
1 | import colors from './colors';
2 |
3 | /*
4 | |-----------------------------------------------------------------------------
5 | | Background colors https://tailwindcss.com/docs/background-color
6 | |-----------------------------------------------------------------------------
7 | |
8 | | Here is where you define your background colors. By default these use
9 | | the color palette we defined above, however you're welcome to set
10 | | these independently if that makes sense for your project.
11 | |
12 | | Class name: .bg-{color}
13 | |
14 | */
15 |
16 | export default colors;
17 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/tests/helpers/start-app.js:
--------------------------------------------------------------------------------
1 | import Application from '../../app';
2 | import config from '../../config/environment';
3 | import { merge } from '@ember/polyfills';
4 | import { run } from '@ember/runloop';
5 |
6 | export default function startApp(attrs) {
7 | let attributes = merge({}, config.APP);
8 | attributes.autoboot = true;
9 | attributes = merge(attributes, attrs); // use defaults, but you can override;
10 |
11 | return run(() => {
12 | let application = Application.create(attributes);
13 | application.setupForTesting();
14 | application.injectTestHelpers();
15 | return application;
16 | });
17 | }
18 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon/tests/helpers/start-app.js:
--------------------------------------------------------------------------------
1 | import Application from '../../app';
2 | import config from '../../config/environment';
3 | import { merge } from '@ember/polyfills';
4 | import { run } from '@ember/runloop';
5 |
6 | export default function startApp(attrs) {
7 | let attributes = merge({}, config.APP);
8 | attributes.autoboot = true;
9 | attributes = merge(attributes, attrs); // use defaults, but you can override;
10 |
11 | return run(() => {
12 | let application = Application.create(attributes);
13 | application.setupForTesting();
14 | application.injectTestHelpers();
15 | return application;
16 | });
17 | }
18 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/addon/tailwind/config/text-colors.js:
--------------------------------------------------------------------------------
1 | import colors from './colors';
2 |
3 | /*
4 | |-----------------------------------------------------------------------------
5 | | Text colors https://tailwindcss.com/docs/text-color
6 | |-----------------------------------------------------------------------------
7 | |
8 | | Here is where you define your text colors. By default these use the
9 | | color palette we defined above, however you're welcome to set these
10 | | independently if that makes sense for your project.
11 | |
12 | | Class name: .text-{color}
13 | |
14 | */
15 |
16 | export default colors;
17 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/addon/tailwind/config/opacity.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Opacity https://tailwindcss.com/docs/opacity
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your opacity utility values. By default we
7 | | provide a sensible numeric scale. You can, of course, modify these
8 | | values as needed.
9 | |
10 | | Class name: .opacity-{name}
11 | |
12 | */
13 |
14 | export default {
15 | '0': '0',
16 | '25': '.25',
17 | '50': '.5',
18 | '75': '.75',
19 | '100': '1'
20 | };
21 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/addon/tailwind/config/opacity.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Opacity https://tailwindcss.com/docs/opacity
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your opacity utility values. By default we
7 | | provide a sensible numeric scale. You can, of course, modify these
8 | | values as needed.
9 | |
10 | | Class name: .opacity-{name}
11 | |
12 | */
13 |
14 | export default {
15 | '0': '0',
16 | '25': '.25',
17 | '50': '.5',
18 | '75': '.75',
19 | '100': '1'
20 | };
21 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/tests/helpers/start-app.js:
--------------------------------------------------------------------------------
1 | import Application from '../../app';
2 | import config from '../../config/environment';
3 | import { merge } from '@ember/polyfills';
4 | import { run } from '@ember/runloop';
5 |
6 | export default function startApp(attrs) {
7 | let attributes = merge({}, config.APP);
8 | attributes.autoboot = true;
9 | attributes = merge(attributes, attrs); // use defaults, but you can override;
10 |
11 | return run(() => {
12 | let application = Application.create(attributes);
13 | application.setupForTesting();
14 | application.injectTestHelpers();
15 | return application;
16 | });
17 | }
18 |
--------------------------------------------------------------------------------
/tests/dummy/app/tailwind/config/z-index.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Z-index https://tailwindcss.com/docs/z-index
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your z-index utility values. By default we
7 | | provide a sensible numeric scale. You can, of course, modify these
8 | | values as needed.
9 | |
10 | | Class name: .z-{index}
11 | | CSS property: z-index
12 | |
13 | */
14 |
15 | export default {
16 | 'auto': 'auto',
17 | '0': 0,
18 | '10': 10,
19 | '20': 20,
20 | '30': 30,
21 | '40': 40,
22 | '50': 50,
23 | };
24 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/addon/tailwind/config/background-colors.js:
--------------------------------------------------------------------------------
1 | import colors from './colors';
2 |
3 | /*
4 | |-----------------------------------------------------------------------------
5 | | Background colors https://tailwindcss.com/docs/background-color
6 | |-----------------------------------------------------------------------------
7 | |
8 | | Here is where you define your background colors. By default these use
9 | | the color palette we defined above, however you're welcome to set
10 | | these independently if that makes sense for your project.
11 | |
12 | | Class name: .bg-{color}
13 | |
14 | */
15 |
16 | export default colors;
17 |
--------------------------------------------------------------------------------
/tests/dummy/app/tailwind/config/min-width.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Minimum width https://tailwindcss.com/docs/min-width
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your minimum width utility sizes. These can
7 | | be percentage based, pixels, rems, or any other units. We provide a
8 | | couple common use-cases by default. You can, of course, modify
9 | | these values as needed.
10 | |
11 | | Class name: .min-w-{size}
12 | | CSS property: min-width
13 | |
14 | */
15 |
16 | export default {
17 | '0': '0',
18 | 'full': '100%',
19 | };
20 |
--------------------------------------------------------------------------------
/blueprints/ember-cli-tailwind/files/__root__/tailwind/config/background-colors.js:
--------------------------------------------------------------------------------
1 | import colors from './colors';
2 |
3 | /*
4 | |-----------------------------------------------------------------------------
5 | | Background colors https://tailwindcss.com/docs/background-color
6 | |-----------------------------------------------------------------------------
7 | |
8 | | Here is where you define your background colors. By default these use
9 | | the color palette we defined above, however you're welcome to set
10 | | these independently if that makes sense for your project.
11 | |
12 | | Class name: .bg-{color}
13 | | CSS property: background-color
14 | |
15 | */
16 |
17 | export default colors;
18 |
--------------------------------------------------------------------------------
/blueprints/ember-cli-tailwind/files/__root__/tailwind/config/opacity.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Opacity https://tailwindcss.com/docs/opacity
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your opacity utility values. By default we
7 | | provide a sensible numeric scale. You can, of course, modify these
8 | | values as needed.
9 | |
10 | | Class name: .opacity-{name}
11 | | CSS property: opacity
12 | |
13 | */
14 |
15 | export default {
16 | '0': '0',
17 | '25': '.25',
18 | '50': '.5',
19 | '75': '.75',
20 | '100': '1',
21 | };
22 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/app/tailwind/config/background-size.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Background sizes https://tailwindcss.com/docs/background-size
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your background sizes. We provide some common
7 | | values that are useful in most projects, but feel free to add other sizes
8 | | that are specific to your project here as well.
9 | |
10 | | Class name: .bg-{size}
11 | |
12 | */
13 |
14 | export default {
15 | auto: 'auto',
16 | cover: 'cover',
17 | contain: 'contain'
18 | };
19 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/addon/tailwind/config/opacity.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Opacity https://tailwindcss.com/docs/opacity
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your opacity utility values. By default we
7 | | provide a sensible numeric scale. You can, of course, modify these
8 | | values as needed.
9 | |
10 | | Class name: .opacity-{name}
11 | |
12 | */
13 |
14 | export default {
15 | '0': '0',
16 | '25': '.25',
17 | '50': '.5',
18 | '75': '.75',
19 | '100': '1'
20 | };
21 |
--------------------------------------------------------------------------------
/tests/dummy/app/tailwind/config/background-size.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Background sizes https://tailwindcss.com/docs/background-size
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your background sizes. We provide some common
7 | | values that are useful in most projects, but feel free to add other sizes
8 | | that are specific to your project here as well.
9 | |
10 | | Class name: .bg-{size}
11 | | CSS property: background-size
12 | |
13 | */
14 |
15 | export default {
16 | 'auto': 'auto',
17 | 'cover': 'cover',
18 | 'contain': 'contain',
19 | };
20 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/app/tailwind/config/min-width.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Minimum width https://tailwindcss.com/docs/min-width
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your minimum width utility sizes. These can
7 | | be percentage based, pixels, rems, or any other units. We provide a
8 | | couple common use-cases by default. You can, of course, modify
9 | | these values as needed.
10 | |
11 | | Class name: .min-w-{size}
12 | |
13 | */
14 |
15 | export default {
16 | '0': '0',
17 | full: '100%'
18 | };
19 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/app/tailwind/config/z-index.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Z-index https://tailwindcss.com/docs/z-index
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your z-index utility values. By default we
7 | | provide a sensible numeric scale. You can, of course, modify these
8 | | values as needed.
9 | |
10 | | Class name: .z-{index}
11 | |
12 | */
13 |
14 | export default {
15 | auto: 'auto',
16 | '0': 0,
17 | '10': 10,
18 | '20': 20,
19 | '30': 30,
20 | '40': 40,
21 | '50': 50
22 | };
23 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/addon/tailwind/config/background-size.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Background sizes https://tailwindcss.com/docs/background-size
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your background sizes. We provide some common
7 | | values that are useful in most projects, but feel free to add other sizes
8 | | that are specific to your project here as well.
9 | |
10 | | Class name: .bg-{size}
11 | |
12 | */
13 |
14 | export default {
15 | auto: 'auto',
16 | cover: 'cover',
17 | contain: 'contain'
18 | };
19 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/addon/tailwind/config/background-size.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Background sizes https://tailwindcss.com/docs/background-size
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your background sizes. We provide some common
7 | | values that are useful in most projects, but feel free to add other sizes
8 | | that are specific to your project here as well.
9 | |
10 | | Class name: .bg-{size}
11 | |
12 | */
13 |
14 | export default {
15 | auto: 'auto',
16 | cover: 'cover',
17 | contain: 'contain'
18 | };
19 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/addon/tailwind/config/min-width.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Minimum width https://tailwindcss.com/docs/min-width
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your minimum width utility sizes. These can
7 | | be percentage based, pixels, rems, or any other units. We provide a
8 | | couple common use-cases by default. You can, of course, modify
9 | | these values as needed.
10 | |
11 | | Class name: .min-w-{size}
12 | |
13 | */
14 |
15 | export default {
16 | '0': '0',
17 | full: '100%'
18 | };
19 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/addon/tailwind/config/z-index.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Z-index https://tailwindcss.com/docs/z-index
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your z-index utility values. By default we
7 | | provide a sensible numeric scale. You can, of course, modify these
8 | | values as needed.
9 | |
10 | | Class name: .z-{index}
11 | |
12 | */
13 |
14 | export default {
15 | auto: 'auto',
16 | '0': 0,
17 | '10': 10,
18 | '20': 20,
19 | '30': 30,
20 | '40': 40,
21 | '50': 50
22 | };
23 |
--------------------------------------------------------------------------------
/tests/dummy/app/tailwind/config/max-height.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Maximum height https://tailwindcss.com/docs/max-height
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your maximum height utility sizes. These can
7 | | be percentage based, pixels, rems, or any other units. We provide a
8 | | couple common use-cases by default. You can, of course, modify
9 | | these values as needed.
10 | |
11 | | Class name: .max-h-{size}
12 | | CSS property: max-height
13 | |
14 | */
15 |
16 | export default {
17 | 'full': '100%',
18 | 'screen': '100vh',
19 | };
20 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/app/tailwind/config/max-height.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Maximum height https://tailwindcss.com/docs/max-height
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your maximum height utility sizes. These can
7 | | be percentage based, pixels, rems, or any other units. We provide a
8 | | couple common use-cases by default. You can, of course, modify
9 | | these values as needed.
10 | |
11 | | Class name: .max-h-{size}
12 | |
13 | */
14 |
15 | export default {
16 | full: '100%',
17 | screen: '100vh'
18 | };
19 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/addon/tailwind/config/min-width.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Minimum width https://tailwindcss.com/docs/min-width
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your minimum width utility sizes. These can
7 | | be percentage based, pixels, rems, or any other units. We provide a
8 | | couple common use-cases by default. You can, of course, modify
9 | | these values as needed.
10 | |
11 | | Class name: .min-w-{size}
12 | |
13 | */
14 |
15 | export default {
16 | '0': '0',
17 | full: '100%'
18 | };
19 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/addon/tailwind/config/z-index.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Z-index https://tailwindcss.com/docs/z-index
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your z-index utility values. By default we
7 | | provide a sensible numeric scale. You can, of course, modify these
8 | | values as needed.
9 | |
10 | | Class name: .z-{index}
11 | |
12 | */
13 |
14 | export default {
15 | auto: 'auto',
16 | '0': 0,
17 | '10': 10,
18 | '20': 20,
19 | '30': 30,
20 | '40': 40,
21 | '50': 50
22 | };
23 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/addon/tailwind/config/max-height.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Maximum height https://tailwindcss.com/docs/max-height
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your maximum height utility sizes. These can
7 | | be percentage based, pixels, rems, or any other units. We provide a
8 | | couple common use-cases by default. You can, of course, modify
9 | | these values as needed.
10 | |
11 | | Class name: .max-h-{size}
12 | |
13 | */
14 |
15 | export default {
16 | full: '100%',
17 | screen: '100vh'
18 | };
19 |
--------------------------------------------------------------------------------
/tests/dummy/app/tailwind/config/svg-fill.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | SVG fill https://tailwindcss.com/docs/svg
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your SVG fill colors. By default we just provide
7 | | `fill-current` which sets the fill to the current text color. This lets you
8 | | specify a fill color using existing text color utilities and helps keep the
9 | | generated CSS file size down.
10 | |
11 | | Class name: .fill-{name}
12 | | CSS property: fill
13 | |
14 | */
15 |
16 | export default {
17 | 'current': 'currentColor',
18 | };
19 |
--------------------------------------------------------------------------------
/blueprints/ember-cli-tailwind/files/__root__/tailwind/config/z-index.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Z-index https://tailwindcss.com/docs/z-index
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your z-index utility values. By default we
7 | | provide a sensible numeric scale. You can, of course, modify these
8 | | values as needed.
9 | |
10 | | Class name: .z-{index}
11 | | CSS property: z-index
12 | |
13 | */
14 |
15 | export default {
16 | 'auto': 'auto',
17 | '0': 0,
18 | '10': 10,
19 | '20': 20,
20 | '30': 30,
21 | '40': 40,
22 | '50': 50,
23 | };
24 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/addon/tailwind/config/max-height.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Maximum height https://tailwindcss.com/docs/max-height
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your maximum height utility sizes. These can
7 | | be percentage based, pixels, rems, or any other units. We provide a
8 | | couple common use-cases by default. You can, of course, modify
9 | | these values as needed.
10 | |
11 | | Class name: .max-h-{size}
12 | |
13 | */
14 |
15 | export default {
16 | full: '100%',
17 | screen: '100vh'
18 | };
19 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/addon/tailwind/config/background-size.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Background sizes https://tailwindcss.com/docs/background-size
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your background sizes. We provide some common
7 | | values that are useful in most projects, but feel free to add other sizes
8 | | that are specific to your project here as well.
9 | |
10 | | Class name: .bg-{size}
11 | |
12 | */
13 |
14 | export default {
15 | auto: 'auto',
16 | cover: 'cover',
17 | contain: 'contain'
18 | };
19 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/addon/tailwind/config/min-width.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Minimum width https://tailwindcss.com/docs/min-width
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your minimum width utility sizes. These can
7 | | be percentage based, pixels, rems, or any other units. We provide a
8 | | couple common use-cases by default. You can, of course, modify
9 | | these values as needed.
10 | |
11 | | Class name: .min-w-{size}
12 | |
13 | */
14 |
15 | export default {
16 | '0': '0',
17 | full: '100%'
18 | };
19 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/addon/tailwind/config/z-index.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Z-index https://tailwindcss.com/docs/z-index
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your z-index utility values. By default we
7 | | provide a sensible numeric scale. You can, of course, modify these
8 | | values as needed.
9 | |
10 | | Class name: .z-{index}
11 | |
12 | */
13 |
14 | export default {
15 | auto: 'auto',
16 | '0': 0,
17 | '10': 10,
18 | '20': 20,
19 | '30': 30,
20 | '40': 40,
21 | '50': 50
22 | };
23 |
--------------------------------------------------------------------------------
/tests/dummy/app/tailwind/config/min-height.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Minimum height https://tailwindcss.com/docs/min-height
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your minimum height utility sizes. These can
7 | | be percentage based, pixels, rems, or any other units. We provide a
8 | | few common use-cases by default. You can, of course, modify these
9 | | values as needed.
10 | |
11 | | Class name: .min-h-{size}
12 | | CSS property: min-height
13 | |
14 | */
15 |
16 | export default {
17 | '0': '0',
18 | 'full': '100%',
19 | 'screen': '100vh',
20 | };
21 |
--------------------------------------------------------------------------------
/blueprints/ember-cli-tailwind/files/__root__/tailwind/config/min-width.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Minimum width https://tailwindcss.com/docs/min-width
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your minimum width utility sizes. These can
7 | | be percentage based, pixels, rems, or any other units. We provide a
8 | | couple common use-cases by default. You can, of course, modify
9 | | these values as needed.
10 | |
11 | | Class name: .min-w-{size}
12 | | CSS property: min-width
13 | |
14 | */
15 |
16 | export default {
17 | '0': '0',
18 | 'full': '100%',
19 | };
20 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/app/tailwind/config/min-height.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Minimum height https://tailwindcss.com/docs/min-height
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your minimum height utility sizes. These can
7 | | be percentage based, pixels, rems, or any other units. We provide a
8 | | few common use-cases by default. You can, of course, modify these
9 | | values as needed.
10 | |
11 | | Class name: .min-h-{size}
12 | |
13 | */
14 |
15 | export default {
16 | '0': '0',
17 | full: '100%',
18 | screen: '100vh'
19 | };
20 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/app/tailwind/config/svg-fill.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | SVG fill https://tailwindcss.com/docs/svg
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your SVG fill colors. By default we just provide
7 | | `fill-current` which sets the fill to the current text color. This lets you
8 | | specify a fill color using existing text color utilities and helps keep the
9 | | generated CSS file size down.
10 | |
11 | | Class name: .fill-{name}
12 | |
13 | */
14 |
15 | export default {
16 | current: 'currentColor'
17 | };
18 |
--------------------------------------------------------------------------------
/tests/dummy/app/tailwind/config/svg-stroke.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | SVG stroke https://tailwindcss.com/docs/svg
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your SVG stroke colors. By default we just provide
7 | | `stroke-current` which sets the stroke to the current text color. This lets
8 | | you specify a stroke color using existing text color utilities and helps
9 | | keep the generated CSS file size down.
10 | |
11 | | Class name: .stroke-{name}
12 | | CSS property: stroke
13 | |
14 | */
15 |
16 | export default {
17 | 'current': 'currentColor',
18 | };
19 |
--------------------------------------------------------------------------------
/app/components/etw/module-style-example.js:
--------------------------------------------------------------------------------
1 | import Component from '@ember/component';
2 | import classesForModuleStyle from 'ember-cli-tailwind/utils/classes-for-module-style';
3 | import { computed } from '@ember/object';
4 | import { inject as service } from '@ember/service';
5 |
6 | export default Component.extend({
7 | tagName: '',
8 | etwTailwindStyleguide: service(),
9 |
10 | // Passed in
11 | moduleStyle: null,
12 |
13 | classesForModuleStyle: computed('moduleStyle', function() {
14 | return classesForModuleStyle(this.moduleStyle);
15 | }),
16 |
17 | actions: {
18 | selectModuleStyle() {
19 | this.etwTailwindStyleguide.set('selectedModuleStyle', this.moduleStyle);
20 | }
21 | }
22 |
23 | });
24 |
--------------------------------------------------------------------------------
/blueprints/ember-cli-tailwind/files/__root__/tailwind/config/background-size.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Background sizes https://tailwindcss.com/docs/background-size
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your background sizes. We provide some common
7 | | values that are useful in most projects, but feel free to add other sizes
8 | | that are specific to your project here as well.
9 | |
10 | | Class name: .bg-{size}
11 | | CSS property: background-size
12 | |
13 | */
14 |
15 | export default {
16 | 'auto': 'auto',
17 | 'cover': 'cover',
18 | 'contain': 'contain',
19 | };
20 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/addon/tailwind/config/min-height.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Minimum height https://tailwindcss.com/docs/min-height
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your minimum height utility sizes. These can
7 | | be percentage based, pixels, rems, or any other units. We provide a
8 | | few common use-cases by default. You can, of course, modify these
9 | | values as needed.
10 | |
11 | | Class name: .min-h-{size}
12 | |
13 | */
14 |
15 | export default {
16 | '0': '0',
17 | full: '100%',
18 | screen: '100vh'
19 | };
20 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/addon/tailwind/config/max-height.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Maximum height https://tailwindcss.com/docs/max-height
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your maximum height utility sizes. These can
7 | | be percentage based, pixels, rems, or any other units. We provide a
8 | | couple common use-cases by default. You can, of course, modify
9 | | these values as needed.
10 | |
11 | | Class name: .max-h-{size}
12 | |
13 | */
14 |
15 | export default {
16 | full: '100%',
17 | screen: '100vh'
18 | };
19 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/addon/tailwind/config/min-height.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Minimum height https://tailwindcss.com/docs/min-height
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your minimum height utility sizes. These can
7 | | be percentage based, pixels, rems, or any other units. We provide a
8 | | few common use-cases by default. You can, of course, modify these
9 | | values as needed.
10 | |
11 | | Class name: .min-h-{size}
12 | |
13 | */
14 |
15 | export default {
16 | '0': '0',
17 | full: '100%',
18 | screen: '100vh'
19 | };
20 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/addon/tailwind/config/svg-fill.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | SVG fill https://tailwindcss.com/docs/svg
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your SVG fill colors. By default we just provide
7 | | `fill-current` which sets the fill to the current text color. This lets you
8 | | specify a fill color using existing text color utilities and helps keep the
9 | | generated CSS file size down.
10 | |
11 | | Class name: .fill-{name}
12 | |
13 | */
14 |
15 | export default {
16 | current: 'currentColor'
17 | };
18 |
--------------------------------------------------------------------------------
/blueprints/ember-cli-tailwind/files/__root__/tailwind/config/max-height.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Maximum height https://tailwindcss.com/docs/max-height
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your maximum height utility sizes. These can
7 | | be percentage based, pixels, rems, or any other units. We provide a
8 | | couple common use-cases by default. You can, of course, modify
9 | | these values as needed.
10 | |
11 | | Class name: .max-h-{size}
12 | | CSS property: max-height
13 | |
14 | */
15 |
16 | export default {
17 | 'full': '100%',
18 | 'screen': '100vh',
19 | };
20 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/addon/tailwind/config/svg-fill.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | SVG fill https://tailwindcss.com/docs/svg
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your SVG fill colors. By default we just provide
7 | | `fill-current` which sets the fill to the current text color. This lets you
8 | | specify a fill color using existing text color utilities and helps keep the
9 | | generated CSS file size down.
10 | |
11 | | Class name: .fill-{name}
12 | |
13 | */
14 |
15 | export default {
16 | current: 'currentColor'
17 | };
18 |
--------------------------------------------------------------------------------
/tests/dummy/app/tailwind/config/border-widths.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Border widths https://tailwindcss.com/docs/border-width
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your border widths. Take note that border
7 | | widths require a special "default" value set as well. This is the
8 | | width that will be used when you do not specify a border width.
9 | |
10 | | Class name: .border{-side?}{-width?}
11 | | CSS property: border-width
12 | |
13 | */
14 |
15 | export default {
16 | default: '1px',
17 | '0': '0',
18 | '2': '2px',
19 | '4': '4px',
20 | '8': '8px',
21 | };
22 |
--------------------------------------------------------------------------------
/blueprints/ember-cli-tailwind/files/__root__/tailwind/config/svg-fill.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | SVG fill https://tailwindcss.com/docs/svg
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your SVG fill colors. By default we just provide
7 | | `fill-current` which sets the fill to the current text color. This lets you
8 | | specify a fill color using existing text color utilities and helps keep the
9 | | generated CSS file size down.
10 | |
11 | | Class name: .fill-{name}
12 | | CSS property: fill
13 | |
14 | */
15 |
16 | export default {
17 | 'current': 'currentColor',
18 | };
19 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/app/tailwind/config/svg-stroke.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | SVG stroke https://tailwindcss.com/docs/svg
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your SVG stroke colors. By default we just provide
7 | | `stroke-current` which sets the stroke to the current text color. This lets
8 | | you specify a stroke color using existing text color utilities and helps
9 | | keep the generated CSS file size down.
10 | |
11 | | Class name: .stroke-{name}
12 | |
13 | */
14 |
15 | export default {
16 | current: 'currentColor'
17 | };
18 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/addon/tailwind/config/svg-stroke.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | SVG stroke https://tailwindcss.com/docs/svg
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your SVG stroke colors. By default we just provide
7 | | `stroke-current` which sets the stroke to the current text color. This lets
8 | | you specify a stroke color using existing text color utilities and helps
9 | | keep the generated CSS file size down.
10 | |
11 | | Class name: .stroke-{name}
12 | |
13 | */
14 |
15 | export default {
16 | current: 'currentColor'
17 | };
18 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/app/tailwind/config/border-widths.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Border widths https://tailwindcss.com/docs/border-width
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your border widths. Take note that border
7 | | widths require a special "default" value set as well. This is the
8 | | width that will be used when you do not specify a border width.
9 | |
10 | | Class name: .border{-side?}{-width?}
11 | |
12 | */
13 |
14 | export default {
15 | default: '1px',
16 | '0': '0',
17 | '2': '2px',
18 | '4': '4px',
19 | '8': '8px'
20 | };
21 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/tests/helpers/module-for-acceptance.js:
--------------------------------------------------------------------------------
1 | import { module } from 'qunit';
2 | import { resolve } from 'rsvp';
3 | import startApp from '../helpers/start-app';
4 | import destroyApp from '../helpers/destroy-app';
5 |
6 | export default function(name, options = {}) {
7 | module(name, {
8 | beforeEach() {
9 | this.application = startApp();
10 |
11 | if (options.beforeEach) {
12 | return options.beforeEach.apply(this, arguments);
13 | }
14 | },
15 |
16 | afterEach() {
17 | let afterEach = options.afterEach && options.afterEach.apply(this, arguments);
18 | return resolve(afterEach).then(() => destroyApp(this.application));
19 | }
20 | });
21 | }
22 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/addon/tailwind/config/svg-stroke.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | SVG stroke https://tailwindcss.com/docs/svg
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your SVG stroke colors. By default we just provide
7 | | `stroke-current` which sets the stroke to the current text color. This lets
8 | | you specify a stroke color using existing text color utilities and helps
9 | | keep the generated CSS file size down.
10 | |
11 | | Class name: .stroke-{name}
12 | |
13 | */
14 |
15 | export default {
16 | current: 'currentColor'
17 | };
18 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-app/tests/helpers/module-for-acceptance.js:
--------------------------------------------------------------------------------
1 | import { module } from 'qunit';
2 | import { resolve } from 'rsvp';
3 | import startApp from '../helpers/start-app';
4 | import destroyApp from '../helpers/destroy-app';
5 |
6 | export default function(name, options = {}) {
7 | module(name, {
8 | beforeEach() {
9 | this.application = startApp();
10 |
11 | if (options.beforeEach) {
12 | return options.beforeEach.apply(this, arguments);
13 | }
14 | },
15 |
16 | afterEach() {
17 | let afterEach = options.afterEach && options.afterEach.apply(this, arguments);
18 | return resolve(afterEach).then(() => destroyApp(this.application));
19 | }
20 | });
21 | }
22 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/addon/tailwind/config/min-height.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Minimum height https://tailwindcss.com/docs/min-height
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your minimum height utility sizes. These can
7 | | be percentage based, pixels, rems, or any other units. We provide a
8 | | few common use-cases by default. You can, of course, modify these
9 | | values as needed.
10 | |
11 | | Class name: .min-h-{size}
12 | |
13 | */
14 |
15 | export default {
16 | '0': '0',
17 | full: '100%',
18 | screen: '100vh'
19 | };
20 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/addon/tailwind/config/svg-fill.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | SVG fill https://tailwindcss.com/docs/svg
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your SVG fill colors. By default we just provide
7 | | `fill-current` which sets the fill to the current text color. This lets you
8 | | specify a fill color using existing text color utilities and helps keep the
9 | | generated CSS file size down.
10 | |
11 | | Class name: .fill-{name}
12 | |
13 | */
14 |
15 | export default {
16 | current: 'currentColor'
17 | };
18 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon/tests/helpers/module-for-acceptance.js:
--------------------------------------------------------------------------------
1 | import { module } from 'qunit';
2 | import { resolve } from 'rsvp';
3 | import startApp from '../helpers/start-app';
4 | import destroyApp from '../helpers/destroy-app';
5 |
6 | export default function(name, options = {}) {
7 | module(name, {
8 | beforeEach() {
9 | this.application = startApp();
10 |
11 | if (options.beforeEach) {
12 | return options.beforeEach.apply(this, arguments);
13 | }
14 | },
15 |
16 | afterEach() {
17 | let afterEach = options.afterEach && options.afterEach.apply(this, arguments);
18 | return resolve(afterEach).then(() => destroyApp(this.application));
19 | }
20 | });
21 | }
22 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/addon/tailwind/config/border-widths.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Border widths https://tailwindcss.com/docs/border-width
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your border widths. Take note that border
7 | | widths require a special "default" value set as well. This is the
8 | | width that will be used when you do not specify a border width.
9 | |
10 | | Class name: .border{-side?}{-width?}
11 | |
12 | */
13 |
14 | export default {
15 | default: '1px',
16 | '0': '0',
17 | '2': '2px',
18 | '4': '4px',
19 | '8': '8px'
20 | };
21 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/tests/helpers/module-for-acceptance.js:
--------------------------------------------------------------------------------
1 | import { module } from 'qunit';
2 | import { resolve } from 'rsvp';
3 | import startApp from '../helpers/start-app';
4 | import destroyApp from '../helpers/destroy-app';
5 |
6 | export default function(name, options = {}) {
7 | module(name, {
8 | beforeEach() {
9 | this.application = startApp();
10 |
11 | if (options.beforeEach) {
12 | return options.beforeEach.apply(this, arguments);
13 | }
14 | },
15 |
16 | afterEach() {
17 | let afterEach = options.afterEach && options.afterEach.apply(this, arguments);
18 | return resolve(afterEach).then(() => destroyApp(this.application));
19 | }
20 | });
21 | }
22 |
--------------------------------------------------------------------------------
/blueprints/ember-cli-tailwind/files/__root__/tailwind/config/min-height.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Minimum height https://tailwindcss.com/docs/min-height
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your minimum height utility sizes. These can
7 | | be percentage based, pixels, rems, or any other units. We provide a
8 | | few common use-cases by default. You can, of course, modify these
9 | | values as needed.
10 | |
11 | | Class name: .min-h-{size}
12 | | CSS property: min-height
13 | |
14 | */
15 |
16 | export default {
17 | '0': '0',
18 | 'full': '100%',
19 | 'screen': '100vh',
20 | };
21 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/addon/tailwind/config/border-widths.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Border widths https://tailwindcss.com/docs/border-width
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your border widths. Take note that border
7 | | widths require a special "default" value set as well. This is the
8 | | width that will be used when you do not specify a border width.
9 | |
10 | | Class name: .border{-side?}{-width?}
11 | |
12 | */
13 |
14 | export default {
15 | default: '1px',
16 | '0': '0',
17 | '2': '2px',
18 | '4': '4px',
19 | '8': '8px'
20 | };
21 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/tests/helpers/module-for-acceptance.js:
--------------------------------------------------------------------------------
1 | import { module } from 'qunit';
2 | import { resolve } from 'rsvp';
3 | import startApp from '../helpers/start-app';
4 | import destroyApp from '../helpers/destroy-app';
5 |
6 | export default function(name, options = {}) {
7 | module(name, {
8 | beforeEach() {
9 | this.application = startApp();
10 |
11 | if (options.beforeEach) {
12 | return options.beforeEach.apply(this, arguments);
13 | }
14 | },
15 |
16 | afterEach() {
17 | let afterEach = options.afterEach && options.afterEach.apply(this, arguments);
18 | return resolve(afterEach).then(() => destroyApp(this.application));
19 | }
20 | });
21 | }
22 |
--------------------------------------------------------------------------------
/blueprints/ember-cli-tailwind/files/__root__/tailwind/config/svg-stroke.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | SVG stroke https://tailwindcss.com/docs/svg
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your SVG stroke colors. By default we just provide
7 | | `stroke-current` which sets the stroke to the current text color. This lets
8 | | you specify a stroke color using existing text color utilities and helps
9 | | keep the generated CSS file size down.
10 | |
11 | | Class name: .stroke-{name}
12 | | CSS property: stroke
13 | |
14 | */
15 |
16 | export default {
17 | 'current': 'currentColor',
18 | };
19 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/addon/tailwind/config/border-widths.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Border widths https://tailwindcss.com/docs/border-width
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your border widths. Take note that border
7 | | widths require a special "default" value set as well. This is the
8 | | width that will be used when you do not specify a border width.
9 | |
10 | | Class name: .border{-side?}{-width?}
11 | |
12 | */
13 |
14 | export default {
15 | default: '1px',
16 | '0': '0',
17 | '2': '2px',
18 | '4': '4px',
19 | '8': '8px'
20 | };
21 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/addon/tailwind/config/svg-stroke.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | SVG stroke https://tailwindcss.com/docs/svg
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your SVG stroke colors. By default we just provide
7 | | `stroke-current` which sets the stroke to the current text color. This lets
8 | | you specify a stroke color using existing text color utilities and helps
9 | | keep the generated CSS file size down.
10 | |
11 | | Class name: .stroke-{name}
12 | |
13 | */
14 |
15 | export default {
16 | current: 'currentColor'
17 | };
18 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/tests/helpers/module-for-acceptance.js:
--------------------------------------------------------------------------------
1 | import { module } from 'qunit';
2 | import { resolve } from 'rsvp';
3 | import startApp from '../helpers/start-app';
4 | import destroyApp from '../helpers/destroy-app';
5 |
6 | export default function(name, options = {}) {
7 | module(name, {
8 | beforeEach() {
9 | this.application = startApp();
10 |
11 | if (options.beforeEach) {
12 | return options.beforeEach.apply(this, arguments);
13 | }
14 | },
15 |
16 | afterEach() {
17 | let afterEach = options.afterEach && options.afterEach.apply(this, arguments);
18 | return resolve(afterEach).then(() => destroyApp(this.application));
19 | }
20 | });
21 | }
22 |
--------------------------------------------------------------------------------
/blueprints/ember-cli-tailwind/files/__root__/tailwind/config/border-widths.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Border widths https://tailwindcss.com/docs/border-width
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your border widths. Take note that border
7 | | widths require a special "default" value set as well. This is the
8 | | width that will be used when you do not specify a border width.
9 | |
10 | | Class name: .border{-side?}{-width?}
11 | | CSS property: border-width
12 | |
13 | */
14 |
15 | export default {
16 | default: '1px',
17 | '0': '0',
18 | '2': '2px',
19 | '4': '4px',
20 | '8': '8px',
21 | };
22 |
--------------------------------------------------------------------------------
/tests/dummy/app/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Dummy
7 |
8 |
9 |
10 | {{content-for "head"}}
11 |
12 |
13 |
14 |
15 | {{content-for "head-footer"}}
16 |
17 |
18 | {{content-for "body"}}
19 |
20 |
21 |
22 |
23 | {{content-for "body-footer"}}
24 |
25 |
26 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon/tests/acceptance/dummy-app-smoke-test.js:
--------------------------------------------------------------------------------
1 | import { test } from 'qunit';
2 | import moduleForAcceptance from '../../tests/helpers/module-for-acceptance';
3 |
4 | moduleForAcceptance('Acceptance | Tailwind config in dependency | Addon dummy app smoke test');
5 |
6 | test(`The styleguide & related assets are not included`, async function(assert) {
7 | await visit('/');
8 |
9 | // Crude way to check that we haven't imported etw.css, which is used for the /tailwind styleguide route.
10 | let styleguideRule = [...document.styleSheets].find(sheet => {
11 | return [...sheet.rules].find(rule => {
12 | let selector = rule.selectorText || '';
13 |
14 | return selector.match(/^\.etw-/);
15 | });
16 | });
17 |
18 | assert.notOk(!!styleguideRule);
19 | });
20 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/tests/integration/components/ui-title-test.js:
--------------------------------------------------------------------------------
1 | import { moduleForComponent, test } from 'ember-qunit';
2 | import hbs from 'htmlbars-inline-precompile';
3 |
4 | moduleForComponent('ui-title', 'Integration | Component | ui title', {
5 | integration: true
6 | });
7 |
8 | test('it renders', function(assert) {
9 | // Set any properties with this.set('myProperty', 'value');
10 | // Handle any actions with this.on('myAction', function(val) { ... });
11 |
12 | this.render(hbs`{{ui-title}}`);
13 |
14 | assert.equal(this.$().text().trim(), '');
15 |
16 | // Template block usage:
17 | this.render(hbs`
18 | {{#ui-title}}
19 | template block text
20 | {{/ui-title}}
21 | `);
22 |
23 | assert.equal(this.$().text().trim(), 'template block text');
24 | });
25 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon/tests/integration/components/ui-title-test.js:
--------------------------------------------------------------------------------
1 | import { moduleForComponent, test } from 'ember-qunit';
2 | import hbs from 'htmlbars-inline-precompile';
3 |
4 | moduleForComponent('ui-title', 'Integration | Component | ui title', {
5 | integration: true
6 | });
7 |
8 | test('it renders', function(assert) {
9 | // Set any properties with this.set('myProperty', 'value');
10 | // Handle any actions with this.on('myAction', function(val) { ... });
11 |
12 | this.render(hbs`{{ui-title}}`);
13 |
14 | assert.equal(this.$().text().trim(), '');
15 |
16 | // Template block usage:
17 | this.render(hbs`
18 | {{#ui-title}}
19 | template block text
20 | {{/ui-title}}
21 | `);
22 |
23 | assert.equal(this.$().text().trim(), 'template block text');
24 | });
25 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/tests/integration/components/ui-button-test.js:
--------------------------------------------------------------------------------
1 | import { moduleForComponent, test } from 'ember-qunit';
2 | import hbs from 'htmlbars-inline-precompile';
3 |
4 | moduleForComponent('ui-button', 'Integration | Component | ui button', {
5 | integration: true
6 | });
7 |
8 | test('it renders', function(assert) {
9 | // Set any properties with this.set('myProperty', 'value');
10 | // Handle any actions with this.on('myAction', function(val) { ... });
11 |
12 | this.render(hbs`{{ui-button}}`);
13 |
14 | assert.equal(this.$().text().trim(), '');
15 |
16 | // Template block usage:
17 | this.render(hbs`
18 | {{#ui-button}}
19 | template block text
20 | {{/ui-button}}
21 | `);
22 |
23 | assert.equal(this.$().text().trim(), 'template block text');
24 | });
25 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon/tests/integration/components/ui-button-test.js:
--------------------------------------------------------------------------------
1 | import { moduleForComponent, test } from 'ember-qunit';
2 | import hbs from 'htmlbars-inline-precompile';
3 |
4 | moduleForComponent('ui-button', 'Integration | Component | ui button', {
5 | integration: true
6 | });
7 |
8 | test('it renders', function(assert) {
9 | // Set any properties with this.set('myProperty', 'value');
10 | // Handle any actions with this.on('myAction', function(val) { ... });
11 |
12 | this.render(hbs`{{ui-button}}`);
13 |
14 | assert.equal(this.$().text().trim(), '');
15 |
16 | // Template block usage:
17 | this.render(hbs`
18 | {{#ui-button}}
19 | template block text
20 | {{/ui-button}}
21 | `);
22 |
23 | assert.equal(this.$().text().trim(), 'template block text');
24 | });
25 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/tests/integration/components/ui-title-test.js:
--------------------------------------------------------------------------------
1 | import { moduleForComponent, test } from 'ember-qunit';
2 | import hbs from 'htmlbars-inline-precompile';
3 |
4 | moduleForComponent('ui-title', 'Integration | Component | ui title', {
5 | integration: true
6 | });
7 |
8 | test('it renders', function(assert) {
9 | // Set any properties with this.set('myProperty', 'value');
10 | // Handle any actions with this.on('myAction', function(val) { ... });
11 |
12 | this.render(hbs`{{ui-title}}`);
13 |
14 | assert.equal(this.$().text().trim(), '');
15 |
16 | // Template block usage:
17 | this.render(hbs`
18 | {{#ui-title}}
19 | template block text
20 | {{/ui-title}}
21 | `);
22 |
23 | assert.equal(this.$().text().trim(), 'template block text');
24 | });
25 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/tests/integration/components/ui-button-test.js:
--------------------------------------------------------------------------------
1 | import { moduleForComponent, test } from 'ember-qunit';
2 | import hbs from 'htmlbars-inline-precompile';
3 |
4 | moduleForComponent('ui-button', 'Integration | Component | ui button', {
5 | integration: true
6 | });
7 |
8 | test('it renders', function(assert) {
9 | // Set any properties with this.set('myProperty', 'value');
10 | // Handle any actions with this.on('myAction', function(val) { ... });
11 |
12 | this.render(hbs`{{ui-button}}`);
13 |
14 | assert.equal(this.$().text().trim(), '');
15 |
16 | // Template block usage:
17 | this.render(hbs`
18 | {{#ui-button}}
19 | template block text
20 | {{/ui-button}}
21 | `);
22 |
23 | assert.equal(this.$().text().trim(), 'template block text');
24 | });
25 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/app/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | SampleApp
7 |
8 |
9 |
10 | {{content-for "head"}}
11 |
12 |
13 |
14 |
15 | {{content-for "head-footer"}}
16 |
17 |
18 | {{content-for "body"}}
19 |
20 |
21 |
22 |
23 | {{content-for "body-footer"}}
24 |
25 |
26 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/tests/dummy/app/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Dummy
7 |
8 |
9 |
10 | {{content-for "head"}}
11 |
12 |
13 |
14 |
15 | {{content-for "head-footer"}}
16 |
17 |
18 | {{content-for "body"}}
19 |
20 |
21 |
22 |
23 | {{content-for "body-footer"}}
24 |
25 |
26 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/tests/dummy/app/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Dummy
7 |
8 |
9 |
10 | {{content-for "head"}}
11 |
12 |
13 |
14 |
15 | {{content-for "head-footer"}}
16 |
17 |
18 | {{content-for "body"}}
19 |
20 |
21 |
22 |
23 | {{content-for "body-footer"}}
24 |
25 |
26 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-app/app/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | SampleApp
7 |
8 |
9 |
10 | {{content-for "head"}}
11 |
12 |
13 |
14 |
15 | {{content-for "head-footer"}}
16 |
17 |
18 | {{content-for "body"}}
19 |
20 |
21 |
22 |
23 | {{content-for "body-footer"}}
24 |
25 |
26 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/tests/acceptance/dummy-app-smoke-test.js:
--------------------------------------------------------------------------------
1 | import { test } from 'qunit';
2 | import moduleForAcceptance from '../../tests/helpers/module-for-acceptance';
3 |
4 | moduleForAcceptance('Acceptance | Tailwind config in Addon, disabled styleguide | Dummy app smoke test');
5 |
6 | test(`The styleguide & related assets are not included in my dummy app`, async function(assert) {
7 | await visit('/');
8 |
9 | // Crude way to check that we haven't imported etw.css, which is used for the /tailwind styleguide route.
10 | let styleguideRule = [...document.styleSheets].find(sheet => {
11 | return [...sheet.rules].find(rule => {
12 | let selector = rule.selectorText || '';
13 |
14 | return selector.match(/^\.etw-/);
15 | });
16 | });
17 |
18 | assert.notOk(!!styleguideRule);
19 | });
20 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon/tests/dummy/app/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Dummy
7 |
8 |
9 |
10 | {{content-for "head"}}
11 |
12 |
13 |
14 |
15 | {{content-for "head-footer"}}
16 |
17 |
18 | {{content-for "body"}}
19 |
20 |
21 |
22 |
23 | {{content-for "body-footer"}}
24 |
25 |
26 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/app/tailwind/config/border-radius.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Border radius https://tailwindcss.com/docs/border-radius
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your border radius values. If a `default` radius
7 | | is provided, it will be made available as the non-suffixed `.rounded`
8 | | utility.
9 | |
10 | | If your scale includes a `0` value to reset already rounded corners, it's
11 | | a good idea to put it first so other values are able to override it.
12 | |
13 | | Class name: .rounded{-side?}{-size?}
14 | |
15 | */
16 |
17 | export default {
18 | none: '0',
19 | sm: '.125rem',
20 | default: '.25rem',
21 | lg: '.5rem',
22 | full: '9999px'
23 | };
24 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/tests/dummy/app/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Dummy
7 |
8 |
9 |
10 | {{content-for "head"}}
11 |
12 |
13 |
14 |
15 | {{content-for "head-footer"}}
16 |
17 |
18 | {{content-for "body"}}
19 |
20 |
21 |
22 |
23 | {{content-for "body-footer"}}
24 |
25 |
26 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/addon/tailwind/config/border-radius.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Border radius https://tailwindcss.com/docs/border-radius
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your border radius values. If a `default` radius
7 | | is provided, it will be made available as the non-suffixed `.rounded`
8 | | utility.
9 | |
10 | | If your scale includes a `0` value to reset already rounded corners, it's
11 | | a good idea to put it first so other values are able to override it.
12 | |
13 | | Class name: .rounded{-side?}{-size?}
14 | |
15 | */
16 |
17 | export default {
18 | none: '0',
19 | sm: '.125rem',
20 | default: '.25rem',
21 | lg: '.5rem',
22 | full: '9999px'
23 | };
24 |
--------------------------------------------------------------------------------
/tests/dummy/app/tailwind/config/border-radius.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Border radius https://tailwindcss.com/docs/border-radius
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your border radius values. If a `default` radius
7 | | is provided, it will be made available as the non-suffixed `.rounded`
8 | | utility.
9 | |
10 | | If your scale includes a `0` value to reset already rounded corners, it's
11 | | a good idea to put it first so other values are able to override it.
12 | |
13 | | Class name: .rounded{-side?}{-size?}
14 | | CSS property: border-radius
15 | |
16 | */
17 |
18 | export default {
19 | 'none': '0',
20 | 'sm': '.125rem',
21 | default: '.25rem',
22 | 'lg': '.5rem',
23 | 'full': '9999px',
24 | };
25 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/addon/tailwind/config/border-radius.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Border radius https://tailwindcss.com/docs/border-radius
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your border radius values. If a `default` radius
7 | | is provided, it will be made available as the non-suffixed `.rounded`
8 | | utility.
9 | |
10 | | If your scale includes a `0` value to reset already rounded corners, it's
11 | | a good idea to put it first so other values are able to override it.
12 | |
13 | | Class name: .rounded{-side?}{-size?}
14 | |
15 | */
16 |
17 | export default {
18 | none: '0',
19 | sm: '.125rem',
20 | default: '.25rem',
21 | lg: '.5rem',
22 | full: '9999px'
23 | };
24 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/app/tailwind/config/font-weights.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Font weights https://tailwindcss.com/docs/font-weight
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your font weights. We've provided a list of
7 | | common font weight names with their respective numeric scale values
8 | | to get you started. It's unlikely that your project will require
9 | | all of these, so we recommend removing those you don't need.
10 | |
11 | | Class name: .font-{weight}
12 | |
13 | */
14 |
15 | export default {
16 | hairline: 100,
17 | thin: 200,
18 | light: 300,
19 | normal: 400,
20 | medium: 500,
21 | semibold: 600,
22 | bold: 700,
23 | extrabold: 800,
24 | black: 900
25 | };
26 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/addon/tailwind/config/font-weights.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Font weights https://tailwindcss.com/docs/font-weight
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your font weights. We've provided a list of
7 | | common font weight names with their respective numeric scale values
8 | | to get you started. It's unlikely that your project will require
9 | | all of these, so we recommend removing those you don't need.
10 | |
11 | | Class name: .font-{weight}
12 | |
13 | */
14 |
15 | export default {
16 | hairline: 100,
17 | thin: 200,
18 | light: 300,
19 | normal: 400,
20 | medium: 500,
21 | semibold: 600,
22 | bold: 700,
23 | extrabold: 800,
24 | black: 900
25 | };
26 |
--------------------------------------------------------------------------------
/tests/dummy/app/tailwind/config/border-colors.js:
--------------------------------------------------------------------------------
1 | import colors from './colors';
2 |
3 | /*
4 | |-----------------------------------------------------------------------------
5 | | Border colors https://tailwindcss.com/docs/border-color
6 | |-----------------------------------------------------------------------------
7 | |
8 | | Here is where you define your border colors. By default these use the
9 | | color palette we defined above, however you're welcome to set these
10 | | independently if that makes sense for your project.
11 | |
12 | | Take note that border colors require a special "default" value set
13 | | as well. This is the color that will be used when you do not
14 | | specify a border color.
15 | |
16 | | Class name: .border-{color}
17 | | CSS property: border-color
18 | |
19 | */
20 |
21 | export default Object.assign({ default: colors['grey-light'] }, colors);
22 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/addon/tailwind/config/font-weights.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Font weights https://tailwindcss.com/docs/font-weight
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your font weights. We've provided a list of
7 | | common font weight names with their respective numeric scale values
8 | | to get you started. It's unlikely that your project will require
9 | | all of these, so we recommend removing those you don't need.
10 | |
11 | | Class name: .font-{weight}
12 | |
13 | */
14 |
15 | export default {
16 | hairline: 100,
17 | thin: 200,
18 | light: 300,
19 | normal: 400,
20 | medium: 500,
21 | semibold: 600,
22 | bold: 700,
23 | extrabold: 800,
24 | black: 900
25 | };
26 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/addon/tailwind/config/border-radius.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Border radius https://tailwindcss.com/docs/border-radius
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your border radius values. If a `default` radius
7 | | is provided, it will be made available as the non-suffixed `.rounded`
8 | | utility.
9 | |
10 | | If your scale includes a `0` value to reset already rounded corners, it's
11 | | a good idea to put it first so other values are able to override it.
12 | |
13 | | Class name: .rounded{-side?}{-size?}
14 | |
15 | */
16 |
17 | export default {
18 | none: '0',
19 | sm: '.125rem',
20 | default: '.25rem',
21 | lg: '.5rem',
22 | full: '9999px'
23 | };
24 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/app/tailwind/config/border-colors.js:
--------------------------------------------------------------------------------
1 | import colors from './colors';
2 |
3 | /*
4 | |-----------------------------------------------------------------------------
5 | | Border colors https://tailwindcss.com/docs/border-color
6 | |-----------------------------------------------------------------------------
7 | |
8 | | Here is where you define your border colors. By default these use the
9 | | color palette we defined above, however you're welcome to set these
10 | | independently if that makes sense for your project.
11 | |
12 | | Take note that border colors require a special "default" value set
13 | | as well. This is the color that will be used when you do not
14 | | specify a border color.
15 | |
16 | | Class name: .border-{color}
17 | |
18 | */
19 |
20 | export default Object.assign({ default: colors['grey-light'] }, colors);
21 |
--------------------------------------------------------------------------------
/tests/dummy/app/tailwind/config/font-weights.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Font weights https://tailwindcss.com/docs/font-weight
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your font weights. We've provided a list of
7 | | common font weight names with their respective numeric scale values
8 | | to get you started. It's unlikely that your project will require
9 | | all of these, so we recommend removing those you don't need.
10 | |
11 | | Class name: .font-{weight}
12 | | CSS property: font-weight
13 | |
14 | */
15 |
16 | export default {
17 | 'hairline': 100,
18 | 'thin': 200,
19 | 'light': 300,
20 | 'normal': 400,
21 | 'medium': 500,
22 | 'semibold': 600,
23 | 'bold': 700,
24 | 'extrabold': 800,
25 | 'black': 900,
26 | };
27 |
--------------------------------------------------------------------------------
/blueprints/ember-cli-tailwind/files/__root__/tailwind/config/border-radius.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Border radius https://tailwindcss.com/docs/border-radius
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your border radius values. If a `default` radius
7 | | is provided, it will be made available as the non-suffixed `.rounded`
8 | | utility.
9 | |
10 | | If your scale includes a `0` value to reset already rounded corners, it's
11 | | a good idea to put it first so other values are able to override it.
12 | |
13 | | Class name: .rounded{-side?}{-size?}
14 | | CSS property: border-radius
15 | |
16 | */
17 |
18 | export default {
19 | 'none': '0',
20 | 'sm': '.125rem',
21 | default: '.25rem',
22 | 'lg': '.5rem',
23 | 'full': '9999px',
24 | };
25 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/addon/tailwind/config/border-colors.js:
--------------------------------------------------------------------------------
1 | import colors from './colors';
2 |
3 | /*
4 | |-----------------------------------------------------------------------------
5 | | Border colors https://tailwindcss.com/docs/border-color
6 | |-----------------------------------------------------------------------------
7 | |
8 | | Here is where you define your border colors. By default these use the
9 | | color palette we defined above, however you're welcome to set these
10 | | independently if that makes sense for your project.
11 | |
12 | | Take note that border colors require a special "default" value set
13 | | as well. This is the color that will be used when you do not
14 | | specify a border color.
15 | |
16 | | Class name: .border-{color}
17 | |
18 | */
19 |
20 | export default Object.assign({ default: colors['grey-light'] }, colors);
21 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/addon/tailwind/config/border-colors.js:
--------------------------------------------------------------------------------
1 | import colors from './colors';
2 |
3 | /*
4 | |-----------------------------------------------------------------------------
5 | | Border colors https://tailwindcss.com/docs/border-color
6 | |-----------------------------------------------------------------------------
7 | |
8 | | Here is where you define your border colors. By default these use the
9 | | color palette we defined above, however you're welcome to set these
10 | | independently if that makes sense for your project.
11 | |
12 | | Take note that border colors require a special "default" value set
13 | | as well. This is the color that will be used when you do not
14 | | specify a border color.
15 | |
16 | | Class name: .border-{color}
17 | |
18 | */
19 |
20 | export default Object.assign({ default: colors['grey-light'] }, colors);
21 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/addon/tailwind/config/font-weights.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Font weights https://tailwindcss.com/docs/font-weight
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your font weights. We've provided a list of
7 | | common font weight names with their respective numeric scale values
8 | | to get you started. It's unlikely that your project will require
9 | | all of these, so we recommend removing those you don't need.
10 | |
11 | | Class name: .font-{weight}
12 | |
13 | */
14 |
15 | export default {
16 | hairline: 100,
17 | thin: 200,
18 | light: 300,
19 | normal: 400,
20 | medium: 500,
21 | semibold: 600,
22 | bold: 700,
23 | extrabold: 800,
24 | black: 900
25 | };
26 |
--------------------------------------------------------------------------------
/blueprints/ember-cli-tailwind/files/__root__/tailwind/config/border-colors.js:
--------------------------------------------------------------------------------
1 | import colors from './colors';
2 |
3 | /*
4 | |-----------------------------------------------------------------------------
5 | | Border colors https://tailwindcss.com/docs/border-color
6 | |-----------------------------------------------------------------------------
7 | |
8 | | Here is where you define your border colors. By default these use the
9 | | color palette we defined above, however you're welcome to set these
10 | | independently if that makes sense for your project.
11 | |
12 | | Take note that border colors require a special "default" value set
13 | | as well. This is the color that will be used when you do not
14 | | specify a border color.
15 | |
16 | | Class name: .border-{color}
17 | | CSS property: border-color
18 | |
19 | */
20 |
21 | export default Object.assign({ default: colors['grey-light'] }, colors);
22 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/addon/tailwind/config/border-colors.js:
--------------------------------------------------------------------------------
1 | import colors from './colors';
2 |
3 | /*
4 | |-----------------------------------------------------------------------------
5 | | Border colors https://tailwindcss.com/docs/border-color
6 | |-----------------------------------------------------------------------------
7 | |
8 | | Here is where you define your border colors. By default these use the
9 | | color palette we defined above, however you're welcome to set these
10 | | independently if that makes sense for your project.
11 | |
12 | | Take note that border colors require a special "default" value set
13 | | as well. This is the color that will be used when you do not
14 | | specify a border color.
15 | |
16 | | Class name: .border-{color}
17 | |
18 | */
19 |
20 | export default Object.assign({ default: colors['grey-light'] }, colors);
21 |
--------------------------------------------------------------------------------
/blueprints/ember-cli-tailwind/files/__root__/tailwind/config/font-weights.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Font weights https://tailwindcss.com/docs/font-weight
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your font weights. We've provided a list of
7 | | common font weight names with their respective numeric scale values
8 | | to get you started. It's unlikely that your project will require
9 | | all of these, so we recommend removing those you don't need.
10 | |
11 | | Class name: .font-{weight}
12 | | CSS property: font-weight
13 | |
14 | */
15 |
16 | export default {
17 | 'hairline': 100,
18 | 'thin': 200,
19 | 'light': 300,
20 | 'normal': 400,
21 | 'medium': 500,
22 | 'semibold': 600,
23 | 'bold': 700,
24 | 'extrabold': 800,
25 | 'black': 900,
26 | };
27 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/app/tailwind/config/max-width.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Maximum width https://tailwindcss.com/docs/max-width
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your maximum width utility sizes. These can
7 | | be percentage based, pixels, rems, or any other units. By default
8 | | we provide a sensible rem based scale and a "full width" size,
9 | | which is basically a reset utility. You can, of course,
10 | | modify these values as needed.
11 | |
12 | | Class name: .max-w-{size}
13 | |
14 | */
15 |
16 | export default {
17 | xs: '20rem',
18 | sm: '30rem',
19 | md: '40rem',
20 | lg: '50rem',
21 | xl: '60rem',
22 | '2xl': '70rem',
23 | '3xl': '80rem',
24 | '4xl': '90rem',
25 | '5xl': '100rem',
26 | full: '100%'
27 | };
28 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/addon/tailwind/config/max-width.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Maximum width https://tailwindcss.com/docs/max-width
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your maximum width utility sizes. These can
7 | | be percentage based, pixels, rems, or any other units. By default
8 | | we provide a sensible rem based scale and a "full width" size,
9 | | which is basically a reset utility. You can, of course,
10 | | modify these values as needed.
11 | |
12 | | Class name: .max-w-{size}
13 | |
14 | */
15 |
16 | export default {
17 | xs: '20rem',
18 | sm: '30rem',
19 | md: '40rem',
20 | lg: '50rem',
21 | xl: '60rem',
22 | '2xl': '70rem',
23 | '3xl': '80rem',
24 | '4xl': '90rem',
25 | '5xl': '100rem',
26 | full: '100%'
27 | };
28 |
--------------------------------------------------------------------------------
/tests/dummy/app/tailwind/config/max-width.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Maximum width https://tailwindcss.com/docs/max-width
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your maximum width utility sizes. These can
7 | | be percentage based, pixels, rems, or any other units. By default
8 | | we provide a sensible rem based scale and a "full width" size,
9 | | which is basically a reset utility. You can, of course,
10 | | modify these values as needed.
11 | |
12 | | Class name: .max-w-{size}
13 | | CSS property: max-width
14 | |
15 | */
16 |
17 | export default {
18 | 'xs': '20rem',
19 | 'sm': '30rem',
20 | 'md': '40rem',
21 | 'lg': '50rem',
22 | 'xl': '60rem',
23 | '2xl': '70rem',
24 | '3xl': '80rem',
25 | '4xl': '90rem',
26 | '5xl': '100rem',
27 | 'full': '100%',
28 | };
29 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/ember-cli-build.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const EmberApp = require('ember-cli/lib/broccoli/ember-app');
4 |
5 | module.exports = function(defaults) {
6 | let app = new EmberApp(defaults, {
7 | // Add options here
8 | });
9 |
10 | // Use `app.import` to add additional libraries to the generated
11 | // output files.
12 | //
13 | // If you need to use different assets in different
14 | // environments, specify an object as the first parameter. That
15 | // object's keys should be the environment name and the values
16 | // should be the asset to use in that environment.
17 | //
18 | // If the library that you are including contains AMD or ES6
19 | // modules that you would like to import into your application
20 | // please specify an object with the list of modules as keys
21 | // along with the exports of each module as its value.
22 |
23 | return app.toTree();
24 | };
25 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/addon/tailwind/config/max-width.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Maximum width https://tailwindcss.com/docs/max-width
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your maximum width utility sizes. These can
7 | | be percentage based, pixels, rems, or any other units. By default
8 | | we provide a sensible rem based scale and a "full width" size,
9 | | which is basically a reset utility. You can, of course,
10 | | modify these values as needed.
11 | |
12 | | Class name: .max-w-{size}
13 | |
14 | */
15 |
16 | export default {
17 | xs: '20rem',
18 | sm: '30rem',
19 | md: '40rem',
20 | lg: '50rem',
21 | xl: '60rem',
22 | '2xl': '70rem',
23 | '3xl': '80rem',
24 | '4xl': '90rem',
25 | '5xl': '100rem',
26 | full: '100%'
27 | };
28 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-app/ember-cli-build.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const EmberApp = require('ember-cli/lib/broccoli/ember-app');
4 |
5 | module.exports = function(defaults) {
6 | let app = new EmberApp(defaults, {
7 | // Add options here
8 | });
9 |
10 | // Use `app.import` to add additional libraries to the generated
11 | // output files.
12 | //
13 | // If you need to use different assets in different
14 | // environments, specify an object as the first parameter. That
15 | // object's keys should be the environment name and the values
16 | // should be the asset to use in that environment.
17 | //
18 | // If the library that you are including contains AMD or ES6
19 | // modules that you would like to import into your application
20 | // please specify an object with the list of modules as keys
21 | // along with the exports of each module as its value.
22 |
23 | return app.toTree();
24 | };
25 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/addon/tailwind/config/max-width.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Maximum width https://tailwindcss.com/docs/max-width
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your maximum width utility sizes. These can
7 | | be percentage based, pixels, rems, or any other units. By default
8 | | we provide a sensible rem based scale and a "full width" size,
9 | | which is basically a reset utility. You can, of course,
10 | | modify these values as needed.
11 | |
12 | | Class name: .max-w-{size}
13 | |
14 | */
15 |
16 | export default {
17 | xs: '20rem',
18 | sm: '30rem',
19 | md: '40rem',
20 | lg: '50rem',
21 | xl: '60rem',
22 | '2xl': '70rem',
23 | '3xl': '80rem',
24 | '4xl': '90rem',
25 | '5xl': '100rem',
26 | full: '100%'
27 | };
28 |
--------------------------------------------------------------------------------
/blueprints/ember-cli-tailwind/files/__root__/tailwind/config/max-width.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Maximum width https://tailwindcss.com/docs/max-width
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your maximum width utility sizes. These can
7 | | be percentage based, pixels, rems, or any other units. By default
8 | | we provide a sensible rem based scale and a "full width" size,
9 | | which is basically a reset utility. You can, of course,
10 | | modify these values as needed.
11 | |
12 | | Class name: .max-w-{size}
13 | | CSS property: max-width
14 | |
15 | */
16 |
17 | export default {
18 | 'xs': '20rem',
19 | 'sm': '30rem',
20 | 'md': '40rem',
21 | 'lg': '50rem',
22 | 'xl': '60rem',
23 | '2xl': '70rem',
24 | '3xl': '80rem',
25 | '4xl': '90rem',
26 | '5xl': '100rem',
27 | 'full': '100%',
28 | };
29 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/app/tailwind/config/colors.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-------------------------------------------------------------------------------
3 | | Colors https://tailwindcss.com/docs/colors
4 | |-------------------------------------------------------------------------------
5 | |
6 | | Here you can specify the colors used in your project. To get you started,
7 | | we've provided a generous palette of great looking colors that are perfect
8 | | for prototyping, but don't hesitate to change them for your project. You
9 | | own these colors, nothing will break if you change everything about them.
10 | |
11 | | We've used literal color names ("red", "blue", etc.) for the default
12 | | palette, but if you'd rather use functional names like "primary" and
13 | | "secondary", or even a numeric scale like "100" and "200", go for it.
14 | |
15 | */
16 |
17 | export default {
18 | brand: '#E04E39',
19 | white: '#ffffff'
20 | };
21 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/addon/tailwind/config/colors.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-------------------------------------------------------------------------------
3 | | Colors https://tailwindcss.com/docs/colors
4 | |-------------------------------------------------------------------------------
5 | |
6 | | Here you can specify the colors used in your project. To get you started,
7 | | we've provided a generous palette of great looking colors that are perfect
8 | | for prototyping, but don't hesitate to change them for your project. You
9 | | own these colors, nothing will break if you change everything about them.
10 | |
11 | | We've used literal color names ("red", "blue", etc.) for the default
12 | | palette, but if you'd rather use functional names like "primary" and
13 | | "secondary", or even a numeric scale like "100" and "200", go for it.
14 | |
15 | */
16 |
17 | export default {
18 | 'white': 'white',
19 | 'brand': '#E04E39'
20 | };
21 |
--------------------------------------------------------------------------------
/tests/dummy/app/tailwind/modules.css:
--------------------------------------------------------------------------------
1 | /**
2 | * This injects Tailwind's base styles, which is a combination of
3 | * Normalize.css and some additional base styles.
4 | *
5 | * You can see the styles here:
6 | * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
7 | */
8 | @import "tailwindcss/preflight";
9 |
10 | /**
11 | * This injects any component classes registered by plugins.
12 | */
13 | @import "tailwindcss/components";
14 |
15 | /**
16 | * Here you would add any of your custom component classes; stuff that you'd
17 | * want loaded *before* the utilities so that the utilities could still
18 | * override them.
19 | */
20 | @import "./components/*.css";
21 |
22 | /**
23 | * This injects all of Tailwind's utility classes, generated based on your
24 | * config file.
25 | */
26 | @import "tailwindcss/utilities";
27 |
28 | /**
29 | * Here you would add any custom utilities you need that don't come out of the
30 | * box with Tailwind.
31 | */
32 | @import "./utilities/*.css";
33 |
--------------------------------------------------------------------------------
/test-projects/scenario-3-disabled-styleguide/sample-addon-with-tailwind/addon/tailwind/config/colors.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-------------------------------------------------------------------------------
3 | | Colors https://tailwindcss.com/docs/colors
4 | |-------------------------------------------------------------------------------
5 | |
6 | | Here you can specify the colors used in your project. To get you started,
7 | | we've provided a generous palette of great looking colors that are perfect
8 | | for prototyping, but don't hesitate to change them for your project. You
9 | | own these colors, nothing will break if you change everything about them.
10 | |
11 | | We've used literal color names ("red", "blue", etc.) for the default
12 | | palette, but if you'd rather use functional names like "primary" and
13 | | "secondary", or even a numeric scale like "100" and "200", go for it.
14 | |
15 | */
16 |
17 | export default {
18 | 'brand': '#E04E39',
19 | 'white': 'white'
20 | };
21 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | parserOptions: {
4 | ecmaVersion: 2017,
5 | sourceType: 'module'
6 | },
7 | plugins: [
8 | 'ember'
9 | ],
10 | extends: [
11 | 'eslint:recommended',
12 | 'plugin:ember/recommended'
13 | ],
14 | env: {
15 | browser: true
16 | },
17 | rules: {
18 | },
19 | overrides: [
20 | // node files
21 | {
22 | files: [
23 | 'testem.js',
24 | 'ember-cli-build.js',
25 | 'config/**/*.js',
26 | 'lib/*/index.js'
27 | ],
28 | parserOptions: {
29 | sourceType: 'script',
30 | ecmaVersion: 2015
31 | },
32 | env: {
33 | browser: false,
34 | node: true
35 | }
36 | },
37 |
38 | // test files
39 | {
40 | files: ['tests/**/*.js'],
41 | excludedFiles: ['tests/dummy/**/*.js'],
42 | env: {
43 | embertest: true
44 | }
45 | }
46 | ]
47 | };
48 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-app/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | parserOptions: {
4 | ecmaVersion: 2017,
5 | sourceType: 'module'
6 | },
7 | plugins: [
8 | 'ember'
9 | ],
10 | extends: [
11 | 'eslint:recommended',
12 | 'plugin:ember/recommended'
13 | ],
14 | env: {
15 | browser: true
16 | },
17 | rules: {
18 | },
19 | overrides: [
20 | // node files
21 | {
22 | files: [
23 | 'testem.js',
24 | 'ember-cli-build.js',
25 | 'config/**/*.js',
26 | 'lib/*/index.js'
27 | ],
28 | parserOptions: {
29 | sourceType: 'script',
30 | ecmaVersion: 2015
31 | },
32 | env: {
33 | browser: false,
34 | node: true
35 | }
36 | },
37 |
38 | // test files
39 | {
40 | files: ['tests/**/*.js'],
41 | excludedFiles: ['tests/dummy/**/*.js'],
42 | env: {
43 | embertest: true
44 | }
45 | }
46 | ]
47 | };
48 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/addon/tailwind/config/colors.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-------------------------------------------------------------------------------
3 | | Colors https://tailwindcss.com/docs/colors
4 | |-------------------------------------------------------------------------------
5 | |
6 | | Here you can specify the colors used in your project. To get you started,
7 | | we've provided a generous palette of great looking colors that are perfect
8 | | for prototyping, but don't hesitate to change them for your project. You
9 | | own these colors, nothing will break if you change everything about them.
10 | |
11 | | We've used literal color names ("red", "blue", etc.) for the default
12 | | palette, but if you'd rather use functional names like "primary" and
13 | | "secondary", or even a numeric scale like "100" and "200", go for it.
14 | |
15 | */
16 |
17 | export default {
18 | 'white': 'white',
19 | 'brand': '#E04E39',
20 | 'secondary': 'blue'
21 | };
22 |
--------------------------------------------------------------------------------
/blueprints/ember-cli-tailwind/files/__root__/tailwind/modules.css:
--------------------------------------------------------------------------------
1 | /**
2 | * This injects Tailwind's base styles, which is a combination of
3 | * Normalize.css and some additional base styles.
4 | *
5 | * You can see the styles here:
6 | * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
7 | */
8 | @import "tailwindcss/preflight";
9 |
10 | /**
11 | * This injects any component classes registered by plugins.
12 | */
13 | @import "tailwindcss/components";
14 |
15 | /**
16 | * Here you would add any of your custom component classes; stuff that you'd
17 | * want loaded *before* the utilities so that the utilities could still
18 | * override them.
19 | */
20 | @import "./components/*.css";
21 |
22 | /**
23 | * This injects all of Tailwind's utility classes, generated based on your
24 | * config file.
25 | */
26 | @import "tailwindcss/utilities";
27 |
28 | /**
29 | * Here you would add any custom utilities you need that don't come out of the
30 | * box with Tailwind.
31 | */
32 | @import "./utilities/*.css";
33 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/tests/acceptance/dummy-app-smoke-test.js:
--------------------------------------------------------------------------------
1 | import { test } from 'qunit';
2 | import moduleForAcceptance from '../../tests/helpers/module-for-acceptance';
3 |
4 | moduleForAcceptance('Acceptance | Tailwind config in Addon | Dummy app smoke test');
5 |
6 | test(`I can import my Tailwind build into my addon.scss file and @extend classes from it`, async function(assert) {
7 | await visit('/');
8 |
9 | let title = find('h2')[0];
10 | let color = window.getComputedStyle(title).getPropertyValue("color");
11 |
12 | assert.equal(color, 'rgb(224, 78, 57)');
13 | });
14 |
15 | test(`The tailwind build is only included once`, async function(assert) {
16 | let vendorStyleSheet = [].slice.call(document.styleSheets)
17 | .find(sheet => sheet.href.match('vendor.css'));
18 |
19 | let flexRules = [].slice.call(vendorStyleSheet.cssRules)
20 | .filter(rule => (rule.selectorText && rule.selectorText === ".flex"));
21 |
22 | assert.equal(flexRules.length, 1);
23 | });
24 |
--------------------------------------------------------------------------------
/tests/dummy/app/tailwind/config/padding.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Padding https://tailwindcss.com/docs/padding
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your padding utility sizes. These can be
7 | | percentage based, pixels, rems, or any other units. By default we
8 | | provide a sensible rem based numeric scale plus a couple other
9 | | common use-cases like "1px". You can, of course, modify these
10 | | values as needed.
11 | |
12 | | Class name: .p{side?}-{size}
13 | | CSS property: padding
14 | |
15 | */
16 |
17 | export default {
18 | 'px': '1px',
19 | '0': '0',
20 | '1': '0.25rem',
21 | '2': '0.5rem',
22 | '3': '0.75rem',
23 | '4': '1rem',
24 | '5': '1.25rem',
25 | '6': '1.5rem',
26 | '8': '2rem',
27 | '10': '2.5rem',
28 | '12': '3rem',
29 | '16': '4rem',
30 | '20': '5rem',
31 | '24': '6rem',
32 | '32': '8rem',
33 | };
34 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/app/tailwind/config/padding.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Padding https://tailwindcss.com/docs/padding
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your padding utility sizes. These can be
7 | | percentage based, pixels, rems, or any other units. By default we
8 | | provide a sensible rem based numeric scale plus a couple other
9 | | common use-cases like "1px". You can, of course, modify these
10 | | values as needed.
11 | |
12 | | Class name: .p{side?}-{size}
13 | |
14 | */
15 |
16 | export default {
17 | px: '1px',
18 | '0': '0',
19 | '1': '0.25rem',
20 | '2': '0.5rem',
21 | '3': '0.75rem',
22 | '4': '1rem',
23 | '5': '1.25rem',
24 | '6': '1.5rem',
25 | '8': '2rem',
26 | '10': '2.5rem',
27 | '12': '3rem',
28 | '16': '4rem',
29 | '20': '5rem',
30 | '24': '6rem',
31 | '32': '8rem'
32 | };
33 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/app/tailwind/modules.css:
--------------------------------------------------------------------------------
1 | /**
2 | * This injects Tailwind's base styles, which is a combination of
3 | * Normalize.css and some additional base styles.
4 | *
5 | * You can see the styles here:
6 | * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
7 | */
8 | @import "tailwindcss/preflight";
9 |
10 | /**
11 | * This injects any component classes registered by plugins.
12 | */
13 | @import "tailwindcss/components";
14 |
15 | /**
16 | * Here you would add any of your custom component classes; stuff that you'd
17 | * want loaded *before* the utilities so that the utilities could still
18 | * override them.
19 | */
20 | @import "./components/*.css";
21 |
22 | /**
23 | * This injects all of Tailwind's utility classes, generated based on your
24 | * config file.
25 | */
26 | @import "tailwindcss/utilities";
27 |
28 | /**
29 | * Here you would add any custom utilities you need that don't come out of the
30 | * box with Tailwind.
31 | */
32 | @import "./utilities/*.css";
33 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/addon/tailwind/config/padding.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Padding https://tailwindcss.com/docs/padding
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your padding utility sizes. These can be
7 | | percentage based, pixels, rems, or any other units. By default we
8 | | provide a sensible rem based numeric scale plus a couple other
9 | | common use-cases like "1px". You can, of course, modify these
10 | | values as needed.
11 | |
12 | | Class name: .p{side?}-{size}
13 | |
14 | */
15 |
16 | export default {
17 | px: '1px',
18 | '0': '0',
19 | '1': '0.25rem',
20 | '2': '0.5rem',
21 | '3': '0.75rem',
22 | '4': '1rem',
23 | '5': '1.25rem',
24 | '6': '1.5rem',
25 | '8': '2rem',
26 | '10': '2.5rem',
27 | '12': '3rem',
28 | '16': '4rem',
29 | '20': '5rem',
30 | '24': '6rem',
31 | '32': '8rem'
32 | };
33 |
--------------------------------------------------------------------------------
/test-projects/scenario-1-app-using-tailwind/sample-app/app/tailwind/config/shadows.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Shadows https://tailwindcss.com/docs/shadows
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your shadow utilities. As you can see from
7 | | the defaults we provide, it's possible to apply multiple shadows
8 | | per utility using comma separation.
9 | |
10 | | If a `default` shadow is provided, it will be made available as the non-
11 | | suffixed `.shadow` utility.
12 | |
13 | | Class name: .shadow-{size?}
14 | |
15 | */
16 |
17 | export default {
18 | default: '0 2px 4px 0 rgba(0,0,0,0.10)',
19 | md: '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',
20 | lg: '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
21 | inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
22 | outline: '0 0 0 3px rgba(52,144,220,0.5)',
23 | none: 'none'
24 | };
25 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/addon/tailwind/config/padding.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Padding https://tailwindcss.com/docs/padding
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your padding utility sizes. These can be
7 | | percentage based, pixels, rems, or any other units. By default we
8 | | provide a sensible rem based numeric scale plus a couple other
9 | | common use-cases like "1px". You can, of course, modify these
10 | | values as needed.
11 | |
12 | | Class name: .p{side?}-{size}
13 | |
14 | */
15 |
16 | export default {
17 | px: '1px',
18 | '0': '0',
19 | '1': '0.25rem',
20 | '2': '0.5rem',
21 | '3': '0.75rem',
22 | '4': '1rem',
23 | '5': '1.25rem',
24 | '6': '1.5rem',
25 | '8': '2rem',
26 | '10': '2.5rem',
27 | '12': '3rem',
28 | '16': '4rem',
29 | '20': '5rem',
30 | '24': '6rem',
31 | '32': '8rem'
32 | };
33 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/addon/tailwind/modules.css:
--------------------------------------------------------------------------------
1 | /**
2 | * This injects Tailwind's base styles, which is a combination of
3 | * Normalize.css and some additional base styles.
4 | *
5 | * You can see the styles here:
6 | * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
7 | */
8 | @import "tailwindcss/preflight";
9 |
10 | /**
11 | * This injects any component classes registered by plugins.
12 | */
13 | @import "tailwindcss/components";
14 |
15 | /**
16 | * Here you would add any of your custom component classes; stuff that you'd
17 | * want loaded *before* the utilities so that the utilities could still
18 | * override them.
19 | */
20 | @import "./components/*.css";
21 |
22 | /**
23 | * This injects all of Tailwind's utility classes, generated based on your
24 | * config file.
25 | */
26 | @import "tailwindcss/utilities";
27 |
28 | /**
29 | * Here you would add any custom utilities you need that don't come out of the
30 | * box with Tailwind.
31 | */
32 | @import "./utilities/*.css";
33 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-app/tests/acceptance/consuming-app-smoke-test.js:
--------------------------------------------------------------------------------
1 | import { test } from 'qunit';
2 | import moduleForAcceptance from 'sample-app/tests/helpers/module-for-acceptance';
3 |
4 | moduleForAcceptance('Acceptance | Tailwind config in Addon | Consuming app smoke test');
5 |
6 | test(`I can use my addon's Tailwind classes in an app`, async function(assert) {
7 | await visit('/');
8 |
9 | let title = find('h2')[0];
10 | let color = window.getComputedStyle(title).getPropertyValue("color");
11 |
12 | assert.equal(color, 'rgb(224, 78, 57)');
13 | });
14 |
15 | test(`I can use my addon's Tailwind components in an app`, async function(assert) {
16 | await visit('/');
17 |
18 | let button = find('button')[0];
19 | let bgColor = window.getComputedStyle(button).getPropertyValue("background-color");
20 | assert.equal(bgColor, 'rgb(224, 78, 57)');
21 |
22 | let textColor = window.getComputedStyle(button).getPropertyValue("color");
23 | assert.equal(textColor, 'rgb(255, 255, 255)');
24 | });
25 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/addon/tailwind/config/shadows.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Shadows https://tailwindcss.com/docs/shadows
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your shadow utilities. As you can see from
7 | | the defaults we provide, it's possible to apply multiple shadows
8 | | per utility using comma separation.
9 | |
10 | | If a `default` shadow is provided, it will be made available as the non-
11 | | suffixed `.shadow` utility.
12 | |
13 | | Class name: .shadow-{size?}
14 | |
15 | */
16 |
17 | export default {
18 | default: '0 2px 4px 0 rgba(0,0,0,0.10)',
19 | md: '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',
20 | lg: '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
21 | inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
22 | outline: '0 0 0 3px rgba(52,144,220,0.5)',
23 | none: 'none'
24 | };
25 |
--------------------------------------------------------------------------------
/test-projects/scenario-4-addon-using-sass/sample-addon/addon/tailwind/modules.css:
--------------------------------------------------------------------------------
1 | /**
2 | * This injects Tailwind's base styles, which is a combination of
3 | * Normalize.css and some additional base styles.
4 | *
5 | * You can see the styles here:
6 | * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
7 | */
8 | @import "tailwindcss/preflight";
9 |
10 | /**
11 | * This injects any component classes registered by plugins.
12 | */
13 | @import "tailwindcss/components";
14 |
15 | /**
16 | * Here you would add any of your custom component classes; stuff that you'd
17 | * want loaded *before* the utilities so that the utilities could still
18 | * override them.
19 | */
20 | @import "./components/*.css";
21 |
22 | /**
23 | * This injects all of Tailwind's utility classes, generated based on your
24 | * config file.
25 | */
26 | @import "tailwindcss/utilities";
27 |
28 | /**
29 | * Here you would add any custom utilities you need that don't come out of the
30 | * box with Tailwind.
31 | */
32 | @import "./utilities/*.css";
33 |
--------------------------------------------------------------------------------
/tests/dummy/app/tailwind/config/shadows.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Shadows https://tailwindcss.com/docs/shadows
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your shadow utilities. As you can see from
7 | | the defaults we provide, it's possible to apply multiple shadows
8 | | per utility using comma separation.
9 | |
10 | | If a `default` shadow is provided, it will be made available as the non-
11 | | suffixed `.shadow` utility.
12 | |
13 | | Class name: .shadow-{size?}
14 | | CSS property: box-shadow
15 | |
16 | */
17 |
18 | export default {
19 | default: '0 2px 4px 0 rgba(0,0,0,0.10)',
20 | 'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',
21 | 'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
22 | 'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
23 | 'outline': '0 0 0 3px rgba(52,144,220,0.5)',
24 | 'none': 'none',
25 | };
26 |
--------------------------------------------------------------------------------
/test-projects/scenario-2-addon-using-tailwind/sample-addon/addon/tailwind/config/shadows.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Shadows https://tailwindcss.com/docs/shadows
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your shadow utilities. As you can see from
7 | | the defaults we provide, it's possible to apply multiple shadows
8 | | per utility using comma separation.
9 | |
10 | | If a `default` shadow is provided, it will be made available as the non-
11 | | suffixed `.shadow` utility.
12 | |
13 | | Class name: .shadow-{size?}
14 | |
15 | */
16 |
17 | export default {
18 | default: '0 2px 4px 0 rgba(0,0,0,0.10)',
19 | md: '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',
20 | lg: '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
21 | inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
22 | outline: '0 0 0 3px rgba(52,144,220,0.5)',
23 | none: 'none'
24 | };
25 |
--------------------------------------------------------------------------------
/tests/dummy/app/tailwind/config/margin.js:
--------------------------------------------------------------------------------
1 | /*
2 | |-----------------------------------------------------------------------------
3 | | Margin https://tailwindcss.com/docs/margin
4 | |-----------------------------------------------------------------------------
5 | |
6 | | Here is where you define your margin utility sizes. These can be
7 | | percentage based, pixels, rems, or any other units. By default we
8 | | provide a sensible rem based numeric scale plus a couple other
9 | | common use-cases like "1px". You can, of course, modify these
10 | | values as needed.
11 | |
12 | | Class name: .m{side?}-{size}
13 | | CSS property: margin
14 | |
15 | */
16 |
17 | export default {
18 | 'auto': 'auto',
19 | 'px': '1px',
20 | '0': '0',
21 | '1': '0.25rem',
22 | '2': '0.5rem',
23 | '3': '0.75rem',
24 | '4': '1rem',
25 | '5': '1.25rem',
26 | '6': '1.5rem',
27 | '8': '2rem',
28 | '10': '2.5rem',
29 | '12': '3rem',
30 | '16': '4rem',
31 | '20': '5rem',
32 | '24': '6rem',
33 | '32': '8rem',
34 | };
35 |
--------------------------------------------------------------------------------