Frontile is separated into several packages so you can choose what features you want in your project. Here you can find information on how to install all the packages.
Independently of what packages you are going to use, you will need to have the Core package installed. Some other packages use components defined in the Core.
Package providing essential a11y and base components.
ember install @frontile/core
// tailwind.config.js
module.exports = {
// ...
plugins: [require('@frontile/core/tailwind')]
};
Components for working with buttons.
ember install @frontile/buttons
// tailwind.config.js
module.exports = {
// ...
plugins: [require('@frontile/buttons/tailwind')]
};
Components for working with forms inputs/fields.
ember install @frontile/forms
// tailwind.config.js
module.exports = {
// ...
plugins: [require('@frontile/forms/tailwind')]
};
Integration between the Forms package and ember-changeset.
ember install @frontile/forms @frontile/changeset-form
// tailwind.config.js
module.exports = {
// ...
plugins: [require('@frontile/forms/tailwind')]
};
Package that provides toast-like notifications.
ember install @frontile/notifications
// tailwind.config.js
module.exports = {
// ...
plugins: [require('@frontile/notifications/tailwind')]
};
Components to render content over the UI, like Modal Dialogs.
ember install @frontile/overlays
// tailwind.config.js
module.exports = {
// ...
plugins: [require('@frontile/overlays/tailwind')]
};
There are two practical approaches to set up PurgeCSS to prevent the erasing of all styles provided by Frontile. The simplest way is to use magical comments to safelist the TailwindCSS components. The other way is to list all the classes (or at least their prefix) in the PurgeCSS safelist config. Check PurgeCSS docs adn tailwindcss docs for further info on safelisting.
File app/styles/app.css
:
@tailwind base;
@tailwind components;
@tailwind utilities;
// tailwind.config.js
module.exports = {
safelist: [
{ pattern: /^close-button/ },
{ pattern: /^js-focus-visible/ },
{ pattern: /^sr-only/ },
// Frontile Forms
{ pattern: /^form-field-checkbox/ },
{ pattern: /^form-field-feedback/ },
{ pattern: /^form-field-hint/ },
{ pattern: /^form-field-input/ },
{ pattern: /^form-field-label/ },
{ pattern: /^form-field-radio/ },
{ pattern: /^form-field-textarea/ },
{ pattern: /^form-input/ },
{ pattern: /^form-textarea/ },
{ pattern: /^form-select/ },
{ pattern: /^form-checkbox/ },
{ pattern: /^form-radio/ },
{ pattern: /^form-checkbox-group/ },
{ pattern: /^form-radio-group/ },
// Frontile Notifications
{ pattern: /^notifications-container/ },
{ pattern: /^notification-card/ },
{ pattern: /^notification-transition/ },
// Frontile Overlays
{ pattern: /^overlay/ },
{ pattern: /^modal/ },
{ pattern: /^drawer/ },
// Frontile Buttons
{ pattern: /^btn/ },
// Power Select
{ pattern: /^ember-power-select/ }
}
// ...
};