Laraform tailwind theme starter

tailwind.js

import utils from '@laraform/laraform/src/utils'
import defaultTheme from '@laraform/laraform/src/themes/default/essentials'

export default utils.extendTheme(defaultTheme, {
  classes: {
    /*
    * Form
    */
    form: 'block w-full',

    /*
    * Form Sub-Components
    */
    elementsContainer: 'w-full',
    formErrors: 'block p-4 bg-red-700 text-white shadow rounded',
    formError: '',
    formLanguageSelectors: 'nav nav-pills nav-justified form-language-selectors',
    formLanguageSelector: '',
    formLanguageSelectorActive: 'active',
    formLanguageSelectorInactive: '',
    formTabs: 'nav nav-tabs form-tabs',
    formTab: '',
    formTabActive: 'active',
    formTabInactive: '',
    formTabInvalid: 'has-error',
    formWizard: 'form-wizard',
    formWizardStep: 'wizard-step',
    formWizardStepActive: 'wizard-step-active',
    formWizardStepInactive: '',
    formWizardStepInvalid: 'wizard-step-errors',
    formWizardStepDisabled: 'wizard-step-disabled',
    formWizardStepCompleted: 'wizard-step-completed',
    formWizardStepPending: 'wizard-step-pending',
    formWizardStepLink: '',
    formWizardControls: 'form-wizard-controls',
    formWizardControlNext: 'btn btn-primary',
    formWizardControlPrevious: 'btn btn-secondary',
    formWizardControlFinish: 'btn btn-primary',
    buttonsContainer: 'text-right pt-5',
    button: 'inline-flex items-center px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:border-blue-700 focus:shadow-outline-blue active:bg-blue-700 transition ease-in-out duration-150',

    /*
    * Element Layout
    */
    elementPrefix: '',
    elementContainer: 'mb-8',
    element: 'element',
    elementInner: 'element-inner',
    elementGroupContainer: 'element-group-container',
    elementGroup: 'element-group',
    elementHasValue: 'has-value',
    elementHasError: 'has-error',
    labelContainer: 'label-container',
    label: 'block text-lg text-gray-800 mb-2',
    floatingLabel: 'floating-label',
    floatingLabelVisible: 'floating-label-visible',
    fieldContainer: 'relative',
    info: 'element-info',
    tooltip: 'element-tooltip',

    /*
    * Element Fields
    */
    inputContainer: 'input-container',
    input: 'form-input',
    textarea: 'form-textarea',
    checkboxGroup: 'checkbox-group',
    checkboxContainer: 'mb-1',
    checkbox: 'mr-2 form-checkbox',
    checkboxLabel: 'text-gray-800 flex items-center',
    radioGroup: 'radio-group',
    radioContainer: 'mb-1',
    radio: 'mr-2 form-radio',
    radioLabel: 'text-gray-800 flex items-center',
    select: 'form-select',
    selectNativePlaceholder: 'native-select-placeholder',
    date: 'form-input',
    toggleText: 'toggle-text',
    trixDisabled: 'trix-disabled',
    listElementContainer: 'list-element-container',
    listElementContainerSortable: 'list-element-container-sortable',
    listAdd: 'py-1 px-3 bg-gray-300 rounded',
    listRemove: 'inline-flex items-center justify-center h-5 w-5 bg-gray-300 rounded',
    uploaderButton: 'btn btn-light uploader-button',
    uploaderDragndrop: 'uploader-dragndrop',
    uploaderDragndropOver: 'uploader-dragndrop-over',
    uploaderDragndropIcon: 'dragndrop-icon',
    uploaderDragndropTitle: 'dragndrop-title',
    uploaderDragndropDescription: 'dragndrop-description',
    uploaderPreviews: 'previews',
    uploaderPreviewsView: 'previews-view-',
    uploaderPreviewsSortable: 'previews-sortable',
    uploaderPreview: 'preview',
    uploaderPreviewFile: 'preview-file',
    uploaderPreviewFileViewPrefix: 'preview-file-',
    uploaderPreviewImage: 'preview-image',
    uploaderPreviewImageViewPrefix: 'preview-image-',
    uploaderPreviewImagePicture: 'picture',
    uploaderPreviewImageFilename: 'filename',
    avatarPreview: 'avatar-preview',
    avatarImage: 'avatar-image',
    avatarPlaceholder: 'avatar-placeholder',
    uploaderIconRemove: 'remove',
    uploaderIconClip: 'icon-clip',

    /*
    * Element Sub-Components
    */
    elementLoader: 'element-loader',
    addonBefore: 'input-group-addon',
    addonAfter: 'input-group-addon',
    elementError: 'text-red-600 font-bold',
    fieldDescription: 'text-gray-700',
  },

  components: {}
})