Adding tailwindcss to your lucky project

A short post about how to add tailwindcss to your lucky project. Disclaimer: I'm new to the crystal programming language, to the lucky framework and all the frontend stuff including webpack and tailwindcss.

Install

Install tailwindcss using npm or yarn:

# Using npm
npm install tailwindcss

# Using Yarn
yarn add tailwindcss

Modify your src/css/app.scss file to include the following code (for example at the top of the file):

@tailwind base;

@tailwind components;

@tailwind utilities;

Modify your webpack.mix.js by adding a postCss plugin for tailwind in the options function like below:

  .options({
    // If you want to process images, change this to true and add options from
    // https://github.com/tcoopman/image-webpack-loader
    imgLoaderOptions: { enabled: false },
    // Stops Mix from clearing the console when compilation succeeds
    clearConsole: false,
    postCss: [require('tailwindcss')]
  })

Enjoy

You can test it by adding a button to some of your lucky pages. Adding the following code:

button class: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full" do
  text " Button "
end

Should result in such a nice button: