Advertisement

# Introduction

Tailnews is Tailwind css news template with simple design and fast loading. This template is perfect for make awesome newspapper and magazine site.

## Quick start

Looking to quickly add Tailnews 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.

                        <!-- plugins js -->
                        <script src="src/vendors/hc-sticky/dist/hc-sticky.js"></script>
                        <script src="src/vendors/glightbox/dist/js/glightbox.min.js"></script>
                        <script src="src/vendors/splidejs/dist/js/splide.min.js"></script>
                        <script src="src/vendors/splide-video/dist/js/splide-extension-video.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.png">

                            <!--Google Fonts-->
                            <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;600;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 }==========  -->
                            <!-- plugins js -->
                            <script src="src/vendors/hc-sticky/dist/hc-sticky.js"></script>
                            <script src="src/vendors/glightbox/dist/js/glightbox.min.js"></script>
                            <script src="src/vendors/splidejs/dist/js/splide.min.js"></script>
                            <script src="src/vendors/splide-video/dist/js/splide-extension-video.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.png">

                            <!--Google Fonts-->
                            <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;600;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 TailPro included npm scripts to automate your time-consuming tasks in your development workflow with Gulp, Browsersync and PostCSS.

## Tooling setup

Tailnews 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 TailPro'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 `Tailnews/` 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.