Introduction

Tailone is Tailwind css one page template with simple design and fast loading. This template is perfect for make awesome digital agency site.

Quick start

Looking to quickly add Tailone to your project? Use css, js and starter page from this package.

CSS

Copy the Tailwind stylesheets <link> and paste to your <head>.

                  
                    <!-- Styles -->
                    <link rel="stylesheet" href="src/css/style.css">

JS

Copy-paste the Plugins and Theme js <script> place the following near the end of your pages, right before the closing </body> tag.

                  
                    <!-- Vendors js -->
                    <script src="src/vendors/glightbox/dist/js/glightbox.min.js"></script>
                    <script src="src/vendors/@splidejs/splide/dist/js/splide.min.js"></script>
                    <script src="src/vendors/typed.js/lib/typed.min.js"></script>
                    <script src="src/vendors/wow.js/dist/wow.min.js"></script>
                    <script src="src/vendors/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>

                    <!-- theme js -->
                    <script src="src/js/theme.js"></script>

Development starter template

Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:

                  
                    <!doctype html>
                    <html lang="en">
                      <head>
                        <!-- Title -->
                        <title>Hello, world!</title>

                        <!-- Required meta tags -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

                        <!-- Favicon  -->
                        <link rel="icon" href="src/img/favicon.jpg">

                        <!--Google Fonts-->
                        <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;700&display=swap" rel="stylesheet">

                        <!--Styles-->
                        <link rel="stylesheet" href="src/css/style.css">
                      </head>

                      <body class="text-gray-700 pt-9 sm:pt-10">
                        <h1>Hello, world!</h1>

                        <!-- =========={ JAVASCRIPT }==========  -->
                        <!-- Vendors js -->
                        <script src="src/vendors/glightbox/dist/js/glightbox.min.js"></script>
                        <script src="src/vendors/@splidejs/splide/dist/js/splide.min.js"></script>
                        <script src="src/vendors/typed.js/lib/typed.min.js"></script>
                        <script src="src/vendors/wow.js/dist/wow.min.js"></script>
                        <script src="src/vendors/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>

                        <!-- theme js -->
                        <script src="src/js/theme.js"></script>
                      </body>
                    </html>

Production Starter template

This is starter template with production files.

                  
                    <!doctype html>
                    <html lang="en" dir="ltr">
                      <head>
                        <!-- Title -->
                        <title>Hello, world!</title>

                        <!-- Required meta tags -->
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

                        <!-- Favicon  -->
                        <link rel="icon" href="src/img/favicon.jpg">

                        <!--Google Fonts-->
                        <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;700&display=swap" rel="stylesheet">

                        <!--Styles-->
                        <link rel="stylesheet" href="dist/css/style.css">
                      </head>

                      <body class="text-gray-700 pt-9 sm:pt-10">
                        <h1>Hello, world!</h1>

                        <!-- =========={ JAVASCRIPT }==========  -->
                        <script src="dist/js/scripts.js"></script>
                      </body>
                    </html>

Build tools

Learn how to use Tailone included npm scripts to automate your time-consuming tasks in your development workflow with Gulp, Browsersync and PostCSS.

Tooling setup

Tailone uses NPM scripts for its build system. Our package.json includes convenient methods for working with the framework, including compiling code, running tests, and more.

To use our build system and run our documentation locally, you'll need a copy of Tailone's source files and Node. Follow these steps and you should be ready to rock:

Download and install Node.js, which we use to manage our dependencies.
Run npm install --global gulp-cli command. If you already installed Gulp CLI previously, you can skip this step and jump to step 3.
Navigate to the root Tailone/ directory and run npm install.
After Npm install complete, run npm run start to start development.

Yup, that's it.

Gulp, Sass and Browsersync

When install processing completed, you'll be able to run the various commands provided from the command line. Now you have an integrated workflow.

Our gulpfile.js includes the following tasks:

Core Task	Description
`npm run start`	Start development process with generate `src/tailwind/*.css` to `src/css/style.css` and launch Browsersync in `http://localhost:3100/` with automate page reload
`npm run build`	Generates a `dist/` directory with all the production files `Minify css and js files`
`npm run updatevendors`	Update all vendors in `src/vendors/*` with new version. Dont forget to run `npm update` before running this task. You can running this task before start development process.

WARNING

If you are using MacOS please use sudo keyword in the command because they need administrator rights to install Gulp globally.