Get started with Glacier Blocks

Glacier Blocks is a Tailwind UI kit designed to help you build your website with Tailwind fast. The plug and play blocks are developed to be used out-of-the-box, or to be remixed as much as you desire.

Getting started with Glacier Blocks is equally as fast as building with a simple 2 step process.

Install Tailwind
Add the Glacier colorscheme to your Tailwind config.

If you’re already familiar with using Tailwind, you can use it as you have before, skipping to the config section.

On the other hand, if you haven’t set up Tailwind before, the next section is for you.

Set up Tailwind

The first thing that you need to do is set up Tailwind. This will allow you to use Tailwind’s classes on your site.

We strongly recommend following the official documentation for installing Tailwind. And we’ll be reiterating part of that documentation here.

For this quick-start guide, we’re going to use the Tailwind CLI tool. If you want to use a different toolchain, please refer to the official installation docs.

Install Tailwind CSS

First, we’re going to install Tailwind via npm. In your terminal run:

npm install -D tailwindcss

Next, we’ll create our tailwind.config.js file by running the init command:

npx tailwindcss init

You should see your new tailwind.config.js file in your project directory.

Set paths to your templates

In order for Tailwind to generate the classes you use, you need to tell it which files to parse.

To do this, you need to add the paths to your template files in your tailwind.config.js file.

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

./src/**/*.{html,js} tells Tailwind to look at every .html and .js file in every subdirectory of the src directory for any Tailwind classes that are being used.

If your templates are in another directory, you will have to modify the content line in your config file.

Add Tailwind directives to your CSS

Next, you will need to add the Tailwind directives for Tailwind to your main CSS file.

@tailwind base;
@tailwind components;
@tailwind utilities;

Use the Tailwind CLI to build

Now that you’ve installed Tailwind, set up the paths to your templates, and added the directives to your CSS file, we can now use the CLI to start building your CSS.

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

This command takes your input file - that contains the Tailwind directives that you just added - and produces the output.css file which you will link to in your HTML.

--watch will rebuild your output.css file as needed when you make changes, so you won’t need to keep running the command.

Use your output CSS file in your HTML

Finally, you just need to link your output.css file in your HTML.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

Load up your page, and you should see that your Hello World heading is large, bold, and underlined. But if you want to be doubly sure that it’s working as intended - let’s add a color to the text.

<h1 class="text-3xl font-bold underline text-purple-600">
  Hello world!
</h1>

Now we can move on to adding the Glacier colorscheme. It only require that you add a few definitions to your Tailwind config file.

Not working or having trouble? Email us and we’ll help get you started.

Add the Glacier colorscheme to your config

With Tailwind installed and working, adding the Glacier colorscheme is easy.

Open your tailwind.config.js file. Then copy and paste the Glacier color definitions to the colors section.

module.exports = {
  content: ["./src/**/*.{html,js}",],
  theme: {
    extend: {
      colors: {
        'glacier': {
          '50': '#F6F7F8', 
          '100': '#F2F4F8', 
          '200': '#ECEFF4', 
          '300': '#E5E9F0', 
          '400': '#D8DEE9', 
          '500': '#4C566A', 
          '600': '#434C5E', 
          '700': '#3B4252', 
          '800': '#2E3440', 
          '900': '#242933',
          'bluegreen': '#8FBCBB',
          'cyan': '#88C0D0',
          'blue': '#81A1C1',
          'darkblue': '#5E81AC',
          'red': '#BF616A',
          'orange': '#D08770',
          'yellow': '#EBCB8B',
          'green': '#A3BE8C',
          'purple': '#B48EAD',
        }
      },
    },
  },
}

If you copy & pasted the above config, please double check your content array and make sure that it is still pointing at your own template directories.

And that’s it! You should can now copy any block from our library and paste it into your project.