Skip to main content

Styling: CSS and Assets

Premium
5 min read

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? (36 h 00 min)

You also get:

61 courses
Premium tutorials
Access to repositories
Private Discord
Get Premium for $129/year or $29/month

Already a member? Login here

Faizan Amin avatar
Faizan Amin

An image is missing sir Please look into this

Povilas Korop avatar
Povilas Korop

Thank you for noticing, fixed!

MimisK avatar
MimisK

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 avatar
Povilas Korop

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 avatar
crThiago

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 avatar
Steve Fontaine

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 avatar
pascal RAYMOND

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 avatar
Povilas Korop

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

rudolfbruder avatar
rudolfbruder

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 avatar
Modestas

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 avatar
ev3rlost

@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!