Tailwind Custom Forms - PHPStorm Live Templates

Tailwind Custom Forms.xml

<templateSet group="Tailwind Custom Forms">
  <template name="twf-input" value="&lt;label class=&quot;block&quot;&gt;&#10;    &lt;span class=&quot;text-gray-700&quot;&gt;$TITLE$&lt;/span&gt;&#10;    &lt;input type=&quot;$TYPE$&quot; name=&quot;$NAME$&quot; class=&quot;form-input mt-1 block w-full&quot; placeholder=&quot;$TITLE$&quot;&gt;&#10;&lt;/label&gt;" description="Input" toReformat="false" toShortenFQNames="true">
    <variable name="TITLE" expression="&quot;Input&quot;" defaultValue="" alwaysStopAt="true" />
    <variable name="TYPE" expression="&quot;text&quot;" defaultValue="" alwaysStopAt="true" />
    <variable name="NAME" expression="camelCase(TITLE)" defaultValue="" alwaysStopAt="false" />
    <context>
      <option name="OTHER" value="true" />
    </context>
  </template>
  <template name="twf-textarea" value="&lt;label class=&quot;block&quot;&gt;&#10;  &lt;span class=&quot;text-gray-700&quot;&gt;$TITLE$&lt;/span&gt;&#10;  &lt;textarea name=&quot;$NAME$&quot; class=&quot;form-textarea mt-1 block w-full&quot; rows=&quot;$ROWS$&quot; placeholder=&quot;$TITLE$&quot;&gt;&lt;/textarea&gt;&#10;&lt;/label&gt;" description="Textarea" toReformat="false" toShortenFQNames="true">
    <variable name="TITLE" expression="&quot;Textarea&quot;" defaultValue="" alwaysStopAt="true" />
    <variable name="NAME" expression="camelCase(TITLE)" defaultValue="" alwaysStopAt="false" />
    <variable name="ROWS" expression="&quot;3&quot;" defaultValue="" alwaysStopAt="true" />
    <context>
      <option name="OTHER" value="true" />
    </context>
  </template>
  <template name="twf-select" value="&lt;label class=&quot;block&quot;&gt;&#10;  &lt;span class=&quot;text-gray-700&quot;&gt;$TITLE$&lt;/span&gt;&#10;  &lt;select name=&quot;$NAME$&quot; class=&quot;form-select block w-full mt-1&quot;&gt;&#10;    &lt;option&gt;$OPTION1$&lt;/option&gt;&#10;    &lt;option&gt;$OPTION2$&lt;/option&gt;&#10;  &lt;/select&gt;&#10;&lt;/label&gt;" description="Select" toReformat="false" toShortenFQNames="true">
    <variable name="TITLE" expression="&quot;Select&quot;" defaultValue="" alwaysStopAt="true" />
    <variable name="NAME" expression="camelCase(TITLE)" defaultValue="" alwaysStopAt="false" />
    <variable name="OPTION1" expression="&quot;Option 1&quot;" defaultValue="" alwaysStopAt="true" />
    <variable name="OPTION2" expression="&quot;Option 2&quot;" defaultValue="" alwaysStopAt="true" />
    <context>
      <option name="OTHER" value="true" />
    </context>
  </template>
  <template name="twf-select-multi" value="&lt;label class=&quot;block&quot;&gt;&#10;  &lt;span class=&quot;text-gray-700&quot;&gt;$TITLE$&lt;/span&gt;&#10;  &lt;select name=&quot;$NAME$&quot; class=&quot;form-multiselect block w-full mt-1&quot; multiple&gt;&#10;    &lt;option&gt;$OPTION1$&lt;/option&gt;&#10;    &lt;option&gt;$OPTION2$&lt;/option&gt;&#10;    &lt;option&gt;$OPTION3$&lt;/option&gt;&#10;    &lt;option&gt;$OPTION4$&lt;/option&gt;&#10;    &lt;option&gt;$OPTION5$&lt;/option&gt;&#10;  &lt;/select&gt;&#10;&lt;/label&gt;" description="Select (Multi)" toReformat="false" toShortenFQNames="true">
    <variable name="TITLE" expression="&quot;Multiselect&quot;" defaultValue="" alwaysStopAt="true" />
    <variable name="NAME" expression="camelCase(TITLE)" defaultValue="" alwaysStopAt="false" />
    <variable name="OPTION1" expression="&quot;Option 1&quot;" defaultValue="" alwaysStopAt="true" />
    <variable name="OPTION2" expression="&quot;Option 2&quot;" defaultValue="" alwaysStopAt="true" />
    <variable name="OPTION3" expression="&quot;Option 3&quot;" defaultValue="" alwaysStopAt="true" />
    <variable name="OPTION4" expression="&quot;Option 4&quot;" defaultValue="" alwaysStopAt="true" />
    <variable name="OPTION5" expression="&quot;Option 5&quot;" defaultValue="" alwaysStopAt="true" />
    <context>
      <option name="OTHER" value="true" />
    </context>
  </template>
  <template name="twf-checkbox" value="&lt;div class=&quot;block&quot;&gt;&#10;  &lt;span class=&quot;text-gray-700&quot;&gt;$TITLE$&lt;/span&gt;&#10;  &lt;div class=&quot;mt-2&quot;&gt;&#10;    &lt;div&gt;&#10;      &lt;label class=&quot;inline-flex items-center&quot;&gt;&#10;        &lt;input name=&quot;$NAME1$&quot; type=&quot;checkbox&quot; class=&quot;form-checkbox&quot; checked&gt;&#10;        &lt;span class=&quot;ml-2&quot;&gt;$OPTION1$&lt;/span&gt;&#10;      &lt;/label&gt;&#10;    &lt;/div&gt;&#10;    &lt;div&gt;&#10;      &lt;label class=&quot;inline-flex items-center&quot;&gt;&#10;        &lt;input name=&quot;$NAME2$&quot; type=&quot;checkbox&quot; class=&quot;form-checkbox&quot;&gt;&#10;        &lt;span class=&quot;ml-2&quot;&gt;$OPTION2$&lt;/span&gt;&#10;      &lt;/label&gt;&#10;    &lt;/div&gt;&#10;    &lt;div&gt;&#10;      &lt;label class=&quot;inline-flex items-center&quot;&gt;&#10;        &lt;input name=&quot;$NAME3$&quot; type=&quot;checkbox&quot; class=&quot;form-checkbox&quot;&gt;&#10;        &lt;span class=&quot;ml-2&quot;&gt;$OPTION3$&lt;/span&gt;&#10;      &lt;/label&gt;&#10;    &lt;/div&gt;&#10;  &lt;/div&gt;&#10;&lt;/div&gt;" description="Checkbox" toReformat="false" toShortenFQNames="true">
    <variable name="TITLE" expression="&quot;Checkbox&quot;" defaultValue="" alwaysStopAt="true" />
    <variable name="OPTION1" expression="&quot;Option 1&quot;" defaultValue="" alwaysStopAt="true" />
    <variable name="NAME1" expression="camelCase(OPTION1)" defaultValue="" alwaysStopAt="false" />
    <variable name="OPTION2" expression="&quot;Option 2&quot;" defaultValue="" alwaysStopAt="true" />
    <variable name="NAME2" expression="camelCase(OPTION2)" defaultValue="" alwaysStopAt="false" />
    <variable name="OPTION3" expression="&quot;Option 3&quot;" defaultValue="" alwaysStopAt="true" />
    <variable name="NAME3" expression="camelCase(OPTION3)" defaultValue="" alwaysStopAt="false" />
    <context>
      <option name="OTHER" value="true" />
    </context>
  </template>
  <template name="twf-radio-buttons" value="&lt;div class=&quot;block&quot;&gt;&#10;  &lt;span class=&quot;text-gray-700&quot;&gt;$TITLE$&lt;/span&gt;&#10;  &lt;div class=&quot;mt-2&quot;&gt;&#10;    &lt;div&gt;&#10;      &lt;label class=&quot;inline-flex items-center&quot;&gt;&#10;        &lt;input name=&quot;$NAME1$&quot;type=&quot;radio&quot; class=&quot;form-radio&quot; name=&quot;radio&quot; value=&quot;1&quot; checked&gt;&#10;        &lt;span class=&quot;ml-2&quot;&gt;$OPTION1$&lt;/span&gt;&#10;      &lt;/label&gt;&#10;    &lt;/div&gt;&#10;    &lt;div&gt;&#10;      &lt;label class=&quot;inline-flex items-center&quot;&gt;&#10;        &lt;input name=&quot;$NAME2$&quot; type=&quot;radio&quot; class=&quot;form-radio&quot; name=&quot;radio&quot; value=&quot;2&quot;&gt;&#10;        &lt;span class=&quot;ml-2&quot;&gt;$OPTION2$&lt;/span&gt;&#10;      &lt;/label&gt;&#10;    &lt;/div&gt;&#10;    &lt;div&gt;&#10;      &lt;label class=&quot;inline-flex items-center&quot;&gt;&#10;        &lt;input name=&quot;$NAME3$&quot; type=&quot;radio&quot; class=&quot;form-radio&quot; name=&quot;radio&quot; value=&quot;3&quot;&gt;&#10;        &lt;span class=&quot;ml-2&quot;&gt;$OPTION3$&lt;/span&gt;&#10;      &lt;/label&gt;&#10;    &lt;/div&gt;&#10;  &lt;/div&gt;&#10;&lt;/div&gt;" description="Radio Buttons" toReformat="false" toShortenFQNames="true">
    <variable name="TITLE" expression="&quot;Radio Buttons&quot;" defaultValue="" alwaysStopAt="true" />
    <variable name="OPTION1" expression="&quot;Option 1&quot;" defaultValue="" alwaysStopAt="true" />
    <variable name="NAME1" expression="camelCase(OPTION1)" defaultValue="" alwaysStopAt="false" />
    <variable name="OPTION2" expression="&quot;Option 2&quot;" defaultValue="" alwaysStopAt="true" />
    <variable name="NAME2" expression="camelCase(OPTION2)" defaultValue="" alwaysStopAt="false" />
    <variable name="OPTION3" expression="&quot;Option 3&quot;" defaultValue="" alwaysStopAt="true" />
    <variable name="NAME3" expression="camelCase(OPTION3)" defaultValue="" alwaysStopAt="false" />
    <context>
      <option name="OTHER" value="true" />
    </context>
  </template>
  <template name="twf-submit" value="&lt;input type=&quot;submit&quot; value=&quot;$TITLE$&quot; name=&quot;$NAME$&quot; class=&quot;bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded cursor-pointer&quot;&gt;" description="Submit" toReformat="false" toShortenFQNames="true">
    <variable name="TITLE" expression="&quot;Submit&quot;" defaultValue="" alwaysStopAt="true" />
    <variable name="NAME" expression="camelCase(TITLE)" defaultValue="" alwaysStopAt="false" />
    <context>
      <option name="OTHER" value="true" />
    </context>
  </template>
</templateSet>