Is there a way to pass Tailwind CSS to Laravel template emails?

@vincent15000 It looks like I will need to alter the default.css file situated in the themes folder (in vendor).

@User476820 I have always updated the vendor CSS file, it's simple and easy to do, I didn't want to spend too much time to use a CSS framework for emails. Perhaps you can use pure CSS in that case ?

@webrobert From what I could see last night, you have to first run this command:

php artisan vendor:publish --tag=laravel-mail

You will then get a new folder "vendor" in you views. If you keep going down the sub folders you will find a "theme" folder with default.css.

Now read this from the Laravel doc:

Customizing The CSS
After exporting the components, the resources/views/vendor/mail/html/themes directory will contain a default.css file. You may customize the CSS in this file and your styles will automatically be converted to inline CSS styles within the HTML representations of your Markdown mail messages.

If you would like to build an entirely new theme for Laravel's Markdown components, you may place a CSS file within the html/themes directory. After naming and saving your CSS file, update the theme option of your application's config/mail.php configuration file to match the name of your new theme.

To customize the theme for an individual mailable, you may set the $theme property of the mailable class to the name of the theme that should be used when sending that mailable.

So based on the above, let's say you create a new CSS file called "test.css"

in your config/mail.php you will need to do this:

    'markdown' => [
        'theme' => 'test',

        'paths' => [
            resource_path('views/vendor/mail'),
        ],
    ],

All you will then need to do is paste your converted Tailwind CSS here and use the classes in your templates.

You may need to run these commands to see the changes.

php artisan view:clear
php artisan config:clear
php artisan config:cache

Let me know if this works please as I have not yet tried it but in a couple of days I will come to this point....I did some research before the tasks get started :-) Hope I got it right!

@User1980 how do you convert Tailwind CSS into a single file so it can be put into the themes folder?

@baumgars run this

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

In webpack.mix.js add this:

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

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

Then in your IDE run the command

npm run dev 

Tailwind will then be added automatically to your main app.css file. All you have to do is make sure this file is in your main blade layout file and tailwind will be accessible all over your app theme.

More here: https://tailwindcss.com/docs/guides/laravel

@User476820 on my end the tailwind colors are not included in the css. Like text-blue-500. So text is still black.

@baumgars Use this magic tool: https://tailwindcolorgenerator.com/

Give a name per color and choose a startup hexa decimal from this list: https://harbormist.com/links/reference/web2_color_palette.html

After generating the color, the -500 will always be the one you assign from the list above. This generator will them create the higher and lower bands.

@User476820 can i not simply put all existing tailwind css into one single file without needing an extra step of using an external generator? Or at post-css stage include only those definitions that are needed in the email.

@baumgars Have you tried these default colors? https://tailwindcss.com/docs/customizing-colors

@User476820 Sure. As i said earlier the default color definitions are missing from the generated css file. Did you reproduce the guide?

@baumgars Very strange, did you make sure everything matched this setup? https://tailwindcss.com/docs/guides/laravel

Also make sure you have no custom colors here:

 theme: {
    extend: {},
  },

As I read earlier that adding custom colors will bypass the default ones automatically.

Does everything else works? 100% Tailwind is working well?(Only the colors are not working?)

@User476820 I did not add custom colors as far as i am aware of. The link you provided leads to some strange redirects to kind of spamming pages. Not going to click on it again...

As far as i have tested things like font-bold, flex, etc. are working. But it would be more productive to discuss it on an actual project.

@baumgars You are right, I removed the link, my avast yesterday did not detect anything on that coding site but today it does.

Not sure what else I can help you with because I gave you as much information as possible about the colors. I never experienced this. The only thing I can tell you to do is simply readd all the default colours manually for this project.

@User476820 Do you have a working example project? Maybe on github? Then we see can see how much the docs are ok. Adding all default colors is a task most would want to avoid. Thats why people tumble on a thread like this to find a much more elegant solution.

@dc-jahanzaib Did you follow the instructions and created a working example project?