Contents

Pre-requisites

Installing/Updating Tailwind CSS

Add Tailwind to your CSS

Create your Tailwind config file (optional)

Use Tailwind CSS via CDN

DOCUMENTATION

Hassle free instructions to get started with TUK

Setting things up

Pre-requisites

TUK components have been designed using **Tailwind CSS >= v2.0.3**. Make sure that you have the latest version of Tailwind CSS installed.

Installing/Updating Tailwind CSS

Install/update Tailwind CSS using your preferred package manager.

1

2

# using npm

$ npm install tailwindcss@latest postcss@latest autoprefixer@latest

1

2

# or using yarn

$ yarn add tailwindcss@latest postcss@latest autoprefixer@latest

Add Tailwind to your CSS

Use the `@tailwind`directive to inject Tailwind's base, components, and utilities styles into your CSS:

1

2

3

@tailwind base;

@tailwind components;

@tailwind utilities;

Tailwind will swap these directives out at build time with all of its generated CSS.

If you're using postcss-import (or a tool that uses it under the hood, such as Webpacker for Rails), use our imports instead of the `@tailwind` directive to avoid issues when importing any of your own additional files:

1

2

3

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

Create your Tailwind config file (optional)

If you'd like to customize your Tailwind installation, you can generate a config file for your project using the Tailwind CLI utility included when you install the Tailwind CSS npm package:

1

$ npx tailwindcss init

This will create a minimal tailwind.config.js file at the root of your project:

1

2

3

4

5

6

7

8

9

// tailwind.config.js

module.exports = {

  purge: [],

  darkMode: false,   // or 'media' or 'class'

   theme: {

      extend: {},

},

  variants: {},

  plugins: [],

}

Use Tailwind CSS via CDN

You can also use Tailwind CSS via CDN, however, several feature that makes Tailwind CSS great will not be availble unless you include Tailwind in your application's build process.

  • You won't be able to customize Tailwind's default theme
  • You won't be able to use any directives like @apply, @variants, etc.
  • You won't be able to enable features like group-hover
  • You won't be able to install third-party plugins
  • You won't be able to tree-shake unused styles

To get the most out of Tailwind, you really should install it via npm. To pull in Tailwind for quick demos or just giving the framework a spin, grab the latest default configuration build via CDN:

1

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

Process your CSS with Tailwind

Using Tailwind with PostCSS:

For most projects, you'll want to add Tailwind as a PostCSS plugin in your build chain.
Generally this means adding Tailwind as a plugin in your postcss.config.js file:

1

2

3

4

5

6

7

8

module.exports = {

   plugins: [

    // ...

    require('tailwindcss'),

    require('autoprefixer'),

     // ...

  ]

}

Using Tailwind CLI:

For simple projects or just giving Tailwind a spin, you can use the Tailwind CLI tool to process your CSS:

1

npx tailwindcss build styles.css -o output.css

For more information regarding Tailwind CSS, please refer to Tailwind CSS docs.

TUK Default Fonts

The font used in the demos/previews is Lato You can use any font of your choice. Below are some recommended fonts that work great with TUK.

TUK Icons

The icons used in TUK are Tabler Icons. You can use any SVG icon set. We would recommend using icons from one library for consistency in icons. We have listed some of the awesome free libraries you can use.

 

TUK Components

Marketing components:

Marketing components are designed to let you create landing pages and websites for your project. Marketing sections has a number of components that can be used together to create beautiful and meaningful landing pages.
You can download templates that are built using TUK marketing components in templates section.

Webapp UI components:

With TUK web app ui components, you can build web apps easier and faster. We have a lot of components that can be used together to make any kind of web application. TUK web app components are best for dashboards, SAAS applications and startups looking to build quick MVPs.
You can also download ready made layouts for some use cases built using TUK application components.

You can use TUK webapp components for any of the following use cases.

  • Build an MVP using TUK web app components
  • Use our advance tables for your data related UI's
  • Need a tooltip, popover or a progress bar? TUK UI elements can be easily used in any web application and modified to fit the needs
  • Use our grids and grid cards  to your dashboard applications for data visulization and various UX needs

How Grids work:

Building different layouts with TUK is very easy. You can build any type of layout using grids and grid cards.

Here is how you can use the grids and grid cards:

1. Select the appropriate grid you want to use from grids

2. Copy and paste code. You'll see a grey dotted border indicating the grid. (In the below preview, we've used a full width 12 Col Grid)

Note: Remove the classes used for border and fixed height

3. Add a card from Grid Cards section. In the preview below, we have used one of the 12 Col cards. (Please note that the cards are designed to best look for a certain grid type. An 8 Col card can be used in a 12 Col grid but the the card won't have the best preview and UX as it would have in 8 Col grid.)

We've put together various grid examples in templates.

TUK Starter Kits

You can use TUK basic starter kit to kickstart your app. Or if you prefer to use bundlers, like Webpack or Parcel, TUK offers the following starter kits built for most popular bundlers:

TUK Resources