Setting up TailwindCSS with a Lucky Crystal application
June 24, 2020 by Stephen Dolan
Introduction
TailwindCSS is a utility-driven CSS framework that makes prototyping dead simple while providing a straightforward path for progressively specific styles.
Lucky is a blazing fast, simple, Rails-meets-Phoenix framework for building rock-solid web apps quickly.
Let’s get these two working together for a super productive web developer experience!
Shortcut
If you want an even quicker way to set up TailwindCSS, go check out my post on the Bloat gem for a way to get up and running in three commands!
Packages
All you need to do to get started is install Tailwind!
yarn add tailwindcss
TailwindCSS Configuration Files
Tailwind can be configured via a tailwind.config.js
file, so let’s throw that into Lucky’s /src/css/
folder:
yarn run tailwindcss init src/css/tailwind.config.js
We’ll leave it as the default for now, but you can do all kinds of fun stuff with that file.
Laravel Mix Configuration
Yep, you read that right! The Lucky team is all about not re-inventing the wheel, and uses Laravel Mix for handling all the asset fun that comes along with modern web applications. You can read more about Laravel Mix and Lucky here.
That said, let’s add the necessary TailwindCSS items to webpack.mix.js
based on the TailwindCSS Documentation.
We need to define a tailwindcss
variable to use:
const tailwindcss = require("tailwindcss");
We then add a few Sass options to tell PostCSS that it should use Tailwind:
.options({
processCssUrls: false,
postCss: [tailwindcss("./src/css/tailwind.config.js")],
})
When that’s done, your file will look something like this:
const tailwindcss = require("tailwindcss");
mix
.js("src/js/app.js", "public/js")
.babelConfig({
plugins: ["@babel/plugin-proposal-class-properties"],
})
.sass("src/css/app.scss", "public/css")
.options({
imgLoaderOptions: { enabled: false },
clearConsole: false,
processCssUrls: false,
postCss: [tailwindcss("./src/css/tailwind.config.js")],
})
...
Include TailwindCSS in your App
Finally, let’s add the TailwindCSS imports to src/css/app.scss
:
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
You also might want to remove the default Lucky styles included to make the default homepage look so pretty, if you haven’t done that yet!
Summary
If you’ve followed the steps above, you should now be able to add a TailwindCSS class to any element on any page to verify the results. I’d suggest adding something nice and noticeable like a bg-red-300
to a header.
Want some help with your personal productivity system?