Styling: CSS and Assets

Currently, our pages don't have any styling. What if you want to use Tailwind CSS classes, how do you install Tailwind into a package?

Don't worry, you don't need to configure Vite or similar inside the package. Your goal is to compile the CSS file before structuring the package. In the first steps in our tutorial, we have that code as a Laravel project, not a package. So that's exactly where you should add Tailwind classes and run npm run build to compile the final CSS into the public folder.

Then, with the package, all you need to do here is copy that pre-built CSS file into the package /resources folder.

This is exactly what I will do, and we have this file:

packages/laraveldaily/laravel-permission-editor/resources/assets/css/app.css:

*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after // ...

Then, we need to register that CSS to be published in the Service Provider...

The Full Lesson is Only for Premium Members

Want to access all of our courses? (29 h 46 min)

You also get:

55 courses

Premium tutorials

Access to repositories

Private Discord

Get Premium for $129/year or $29/month

Already a member? Login here

Comments & Discussion

Faizan Amin 2 years ago ✓ Link copied!

An image is missing sir Please look into this

Povilas Korop 2 years ago ✓ Link copied!

Thank you for noticing, fixed!

MimisK 2 years ago ✓ Link copied!

What other options do we have in ways to install Tailwindcss or javascript packages in general?

Is it just my idea that the package development part is poor in the docs?

Povilas Korop 2 years ago ✓ Link copied!

To be honest, I haven't created more complex packages that required this. But I agree that, while doing my research, that part of the docs is unclear, so you could maybe consult other package creators for this.

crThiago 2 years ago ✓ Link copied!

I think it's missing to include the packages in the tailwind.config.js file

example: tailwind.config.js

module.exports = {
  content: [
      "./resources/**/*.blade.php",
      "./resources/**/*.js",
      "./resources/**/*.vue",
      "./packages/**/*.blade.php", //added our package
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Steve Fontaine 1 year ago ✓ Link copied!

Yes this is needed but I found out that it needs to be in this order otherwise the npm run build emits an error:

"./packages/**/*.blade.php", //added our package
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",

pascal RAYMOND 2 years ago ✓ Link copied!

Hi dudes! Having fun with your courses, thanks you so much

I noticed a typo when you register the CSS to be published in the Service Provider:

$this->publishes([
        __DIR__.'/../resources/assets' => public_path('permission-editor'),
], 'assets');

should be

$this->publishes([
    __DIR__.'/../resources/assets' => public_path('permission-editor'),
], 'permission-editor-assets');

So when you prompt php artisan vendor:publish you can see a clear tag of your Service Provider ( see now it only returns tag assets at line 11 )

It's a small detail but I was confused about this tag name came from

Povilas Korop 2 years ago ✓ Link copied!

Well noticed! It's not a typo, it's more like we forgot about changing this :) Thanks, fixed now.

rudolfbruder 2 years ago ✓ Link copied!

Hi,

I am facing issue that we I am developing my package locally and have npm watch running in the package directory I always need to publish the assets in another terminal window to see my effects in the project. Is there some workaround it? It does not feel right doing it this way.

Modestas 2 years ago ✓ Link copied!

Not sure about that case. It seems to be correct that you need to publish assets and should not use the npm run dev.

Or you might want to re-configure the dev command to output into correct path (I suspect it's outputting in a wrong folder)

ev3rlost 1 year ago ✓ Link copied!

@rudolfbruder

I've finally figured it out how to do that!

Run php artisan vendor:publish once as instructed in this tutorial. After that install the following npm package:

https://www.npmjs.com/package/sync-directory

Install it using npm i sync-directory -g

After installation go to your root app package.json file and add the following:

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "sync" : "syncdir ./packages/username/packagename/resources/css ./resources/css -w"
},

Of course edit /username/ and /packagename/ to your personal info, and the overall folder structure (if needed).

After that, have a terminal window open and run npm run sync.

Hope this helps!

The Full Lesson is Only for Premium Members

Comments & Discussion

We'd Love Your Feedback

Thank You!