How to set up Crystal Amber framework with Tailwind CSS

Mitch

Warning - Old content ahead!

This page has been marked as a legacy post. This means it's quite old (from 2018) and probably out of date. Take it with a grain of salt!

This tutorial runs through adding Tailwind CSS to a Crystal Amber project using Webpack and SASS.

It assumes you already have a working Amber project. If not, check out the Installation and Installation and Create New App guides first. You’ll also need Node installed.

This tutorial works sing Node 8.11.4, Crystal: 0.26.1, Amber 0.9.0, Webpack 3.12

Why Tailwind CSS?

There are a lot of reasons to give Tailwind CSS a try, but coming from Bootstrap it can take some adjustment. Some of the things I really like include:

Check out the docs for more information

Why Amber?

Coming from someone that enjoys using Ruby on Rails and is intrigued by Crystal, I really like Amber and how familiar it already is. Not to mention it’s blazing fast!

Check out the docs for more information

Using Tailwind with Amber

Add Tailwind CSS and Post CSS to your package.json.

"tailwindcss": "^0.6.5",
"postcss": "^6.0.19",
"postcss-loader": "^2.1.1"

Run yarn install.

In src/assets/stylesheets add postcss.config.js with the following content:

var tailwindcss = require('tailwindcss');
module.exports = {
  plugins: [
  tailwindcss('./config/webpack/tailwind.js'),
  require('autoprefixer')
  ],
}

In config/webpack/common.js update the SASS rules to include PostCSS

	  {
		test: /\.scss$/,
		exclude: /node_modules/,
		use: ExtractTextPlugin.extract({
		  fallback: 'style-loader',
		  use: [ 'css-loader', 'postcss-loader', 'sass-loader']
		})
	  },

Create the tailwind.js file inside of config/webpack/ by running the following command.

./node_modules/.bin/tailwind init config/webpack/tailwind.js

Update your src/assets/stylesheets/main.css to inject Tailwind

/**
 * This injects Tailwind's base styles, which is a combination of
 * Normalize.css and some additional base styles.
 *
 * You can see the styles here:
 * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/preflight";
 */
@tailwind preflight;

 /**
  * This injects any component classes registered by plugins.
  *
  * If using `postcss-import`, use this import instead:
  *
  * @import "tailwindcss/components";
  */
 @tailwind components;
 
 /**
  * Here you would add any of your custom component classes; stuff that you'd
  * want loaded *before* the utilities so that the utilities could still
  * override them.
  *
  * Example:
  *
  * .btn { ... }
  * .form-input { ... }
  *
  * Or if using a preprocessor or `postcss-import`:
  *
  * @import "components/buttons";
  * @import "components/forms";
  */
 
 /**
  * This injects all of Tailwind's utility classes, generated based on your
  * config file.
  *
  * If using `postcss-import`, use this import instead:
  *
  * @import "tailwindcss/utilities";
  */
 @tailwind utilities;
 
 /**
  * Here you would add any custom utilities you need that don't come out of the
  * box with Tailwind.
  *
  * Example :
  *
  * .bg-pattern-graph-paper { ... }
  * .skew-45 { ... }
  *
  * Or if using a preprocessor or `postcss-import`:
  *
  * @import "utilities/background-patterns";
  * @import "utilities/skew-transforms";
  */

 /**
  * Example usage
  */
  body {
	@apply .bg-red;
  }

Run amber watch and your <body> should have a red background!

Spread the word

Share this article

Like this content?

Check out some of the apps that I've built!

Snipline

Command-line snippet manager for power users

View

Pinshard

Third party Pinboard.in app for iOS.

View

Rsyncinator

GUI for the rsync command

View

Comments