<p class="mb-0">Looking to start your project quickly? Just unzip the <code>Phoenix Tailwind-v1.0.0-beta.zip</code>. We have precompiled and packaged everything in the <code>public</code> directory for you. Start editing the <code>public/pages/starter.html</code> with a text or code editor, save it, and open the file in your favourite browser to see the changes.</p>

<p>Unzip the <code>Phoenix Tailwind-v1.0.0-beta.zip</code> to any folder and open a command line or terminal at that location.
  theme's dev tools require <a href="https://nodejs.org/en/" target="_blank">Node</a> and <a href="https://git-scm.com/" target="_blank">Git</a> . If you do not have them in your machine, please install their latest stable version from their corresponding website. As you have <span class="font-black text-body-emphasis">Node and Git installed and accessible from your terminal or command line</span>, install <a href="https://gulpjs.com/" target="_blank">Gulp CLI</a> package
  globally with the following command:</p><pre><code class="lang-html">npm i gulp-cli -g
</code></pre>
<p class="mt-6">When you’re done, install the rest of the theme’s dependencies with:</p><pre><code class="lang-html">npm i
</code></pre>
<p class="mt-6">Now run:</p><pre><code class="lang-html">gulp
</code></pre>
<p class="mt-6">Running gulp will compile the CSS, transpile the javascript, copy all required libraries form <code>node_modules</code> to the corresponding <code>public/assets/vendors </code> directory and will open a browser window to <code>public/index.html</code></p>
<p>All of the following folders are monitored for changes, which will tell the browser to reload automatically after any changes are made:</p><pre><code class="lang-html">public/assets/fonts/
public/assets/video/
public/assets/img/
public/vendors
src/pug/
src/css/
src/js/
</code></pre>
<p class="mt-6">Now you can edit any <code>pug</code> file from <code>src/pug</code>, change CSS variable from <code>src/theme.css,</code><code>src/root.css,</code>, or write your own CSS code
  and add or update <code>javaScript</code> from <code>src/js</code> directory.</p>
<div class="alert alert-subtle-warning">Running the <code>gulp</code> command will discard and regenerate all the files in following directories:</div><pre><code class="lang-html">public/**/*.html
public/assets/css/
public/assets/js/
public/vendors
</code></pre>
<p class="mt-6">Hit <code>Ctrl+C</code> or just close the command line window to stop the server.</p>
<p>Happy editing!</p>

<p>You can customize the pages directly from the html files in the public directory. To do this run the following command: <code>npm run start:html</code></p>
<p>Running this command will compile the CSS from <code>src/css, </code>transpile the javascript from <code>src/js, </code>copy all required libraries form <code>node_modules </code>to the corresponding <code>public/assets/vendors </code>directory and will open a browser window to <code>public/index.html </code>at port <code>5000</code></p>
<p>All of the following folders are monitored for changes, which will tell the browser to reload automatically after any changes are made:</p><pre><code class="lang-html">public/assets/fonts/
public/assets/video/
public/assets/img/
public/vendors
public/**/*.html
src/css/
src/js/
</code></pre>
<p class="mt-6">Now you can edit any <code>HTML</code> file from <code>public</code>, change CSS variable from <code>src/theme.css, </code><code>src/root.css, </code>or write your own CSS code
  and add or update <code>javaScript</code> from <code>src/js</code> directory.</p>