popolo - code simple..

popolo - code simple..

Masonite Project - Install TailwindCSS

Masonite Project - Install TailwindCSS

Theodoros Kafantaris's photo
Theodoros Kafantaris
·Apr 16, 2022·

2 min read

Table of contents

  • Getting Started
  • Configuration
  • Installing TailwindCSS
  • Add Tailwind to your Laravel Mix configuration
  • Configure your template paths
  • Add the Tailwind directives to your CSS
  • Start our build process
  • Start using Tailwind in our project

By default, Masonite is coming with TailwindCSS from CDN. We can find this in base.html that is located in templates folder. This is the base template that we can use it to extend to further pages.

Screenshot 2022-04-15 at 9.44.18 PM.png

For the authentication pages, the relevant base.html file is inside the folder templates/auth/base.html

image.png

According to the Masonite docs, it uses Laravel Mix which provides a really simple way to handle asset compiling even greater than simple SASS and LESS. You don't need to be an expert in either Laravel Mix or NPM to compile assets, though.

Getting Started

To get started we can simply run NPM install:

npm install

This will install everything you need to start compiling assets.

image.png

Configuration

The configuration settings will be made inside our webpack.mix.js file located in the root of our project. You can see there is already an example config setup for you that looks like this:

mix
  .js("resources/js/app.js", "storage/compiled/js")
  .postCss("resources/css/app.css", "storage/compiled/css", [
    //
  ]);

This will move these 2 files, resources/js/app.js and resources/css/app.css and compile them both into the storage/compiled directory.

Installing TailwindCSS

Masonite is using Laravel mix so we can just follow guidelines to setup TailwindCSS for Laravel Mix on TailwindCSS Official Documentation. So let's do it together!

Install tailwindcss and its peer dependencies via npm, and create your tailwind.config.js file.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Screenshot 2022-04-15 at 10.16.01 PM.png

Add Tailwind to your Laravel Mix configuration

In your webpack.mix.js file, add tailwindcss as a PostCSS plugin.

mix.js("resources/js/app.js", "public/js")
  .postCss("resources/css/app.css", "public/css", [
    require("tailwindcss"),
  ]);

image.png

Configure your template paths

Add the paths to all of your template files in your tailwind.config.js file. In contrast with Laravel, Masonite puts the views inside the templates folder and not inside resources. So we must modify the module.exports as below.

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

image.png

Add the Tailwind directives to your CSS

Add the @tailwind directives for each of Tailwind’s layers to your ./resources/css/app.css file.

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

image.png

Start our build process

Run our build process with

npm run watch

image.png

Start using Tailwind in our project

Make sure our compiled CSS is included in the then start using Tailwind’s utility classes to style your content. Let's start with templates/base.html for all views Add the following line: <link rel="stylesheet" href="/assets/css/app.css">

image.png

And the same also line to templates/auth/base.html for register and login page.

image.png

Congratulations! TailwindCSS is installed in your Masonite project.

 
Share this