Quick Start

How to get started with Tailmars

After purchasing Tailmars, you will be able to download a folder with all of the necessary files. You'll also have access to all future updates.

You have two options, using this project as the starter template and building your website from there, or taking some components and putting them inside your own project.

Using this project

You'll need Node.js, if you don't have installed, you can get it from here

Open a terminal and navigate into the project folder. Install the dependencies by running npm install

Running npm run dev will start the project on development mode. This will open the JIT compiler watcher and add any necessary Tailwind classes to your production output file.

Import components into your project

You can also install Tailwind into your project, copy the tailwind.config.js file, copy the scripts from package.json, and then get to building!

Customization

Colors

The primary, secondary and complementary colors provide you basic controls to modify your theme's colors.

Primary

Secondary

Complementary

To customize the primary, secondary and complementary colors go to the tailwind.config.js file and modify the colors object. 

            
module.exports = {
  // ...
  theme: {
    extend: {
      colors: {
        primary: colors.red,
        secondary: colors.gray,
        complementary: colors.blue,
      },
      // ...
    }
  }
  // ...
};

Font

To customize the font go to the tailwind.config.js file and modify the font-family object. 

            
module.exports = {
  // ...
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
      // ...
    }
  }
  // ...
};

Change Log

V1.0.0 - July 31, 2021

  • Initial release of Tailmars 🚀

V1.1.0 - September 2, 2021

V1.2.0 - November 1, 2021

V1.3.0 - January 1, 2022

  • Improvements and bug fixes
  • Updated TailwindCSS to v3.0
  • Added Vite for on demand file serving

Buttons

Use our custom button styles for actions in forms, modals, expand/collapse and more.

NOTE: Sometimes the <button> tag will need to be swapped out for an <a> tag depending on the use. If the user is brought to a new page, a new location on the same page, or linked to a file, email address, etc., an anchor tag should be used for accessibility.

Filled

Soft

Outline

Cards

Cards provide a flexible and extensible container with lots of variants and options.

Call to Action

Do you have any questions about Tailmars?
Our support team is available for you anytime

Stats

1
Customers
5
Downloads
100%
Happy clients
8
Page views

Projects

This is a wider card with supporting text below as a natural lead-in to additional content.
Marketing
Living Dangerously

Pricing

$19
Standard License
Link Building
Keyword Research
SEO Audit
Email Marketing
$49
Extended License
Link Building
Keyword Research
SEO Audit
Email Marketing