I experienced an extremely sluggish refresh time after adding Tailwind to my small Next project. I initially thought it was my device.
I solved this by using Tailwind's just-in-time mode.
// tailwind.config.js
module.exports = {
mode: 'jit',
...
}
This feature is currently in preview, which means it's subject to change, but it worked for me.
I solved it by removing the
#tailwind base;
#tailwind components;
#tailwind utilities;
from my global.css file. The disadvantage to this is that you will not be able to apply tailwind classes inline but you can still write your tailwind in your css files and use #apply.
I solved this by removing #tailwind directives from global.css file like #GeniusHawlah.
then Tailwind CLI:
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
and i imported output.css to my global.css.
when i edit *.jsx files, tailwindcss update output.css.
Related
I've created a new project using the lucky framework and want to add tailwindcss. I have added it using these steps:
yarn add tailwindcss (https://tailwindcss.com/docs/installation)
npx tailwindcss init (https://tailwindcss.com/docs/configuration)
Added this to webpack.mix.js (https://tailwindcss.com/docs/installation)
mix.postCss('src/css/main.css', 'public/css', [
require('tailwindcss'),
])
Added the following to src/css/main.css:
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
When I run lucky dev the assets are compiled but text isn't changed like in this basic example:
li class: "p-3 text-orange-800" do
text "Modify this page: src/pages/me/show_page.cr"
end
I seem to miss some steps to make it work in this framework.
I don't think your webpack.mix.js content is quite right.
You can see how I set up Tailwind CSS in a Lucky Application in this RailsByte, but basically:
Add const tailwindcss = require("tailwindcss"); somewhere at the top of webpack.mix.js.
Add this to your .options() hash in webpack.mix.js, assuming your Tailwind config is in the root directory of your project:
processCssUrls: false,
postCss: [ tailwindcss("./tailwind.config.js") ],
These are all pretty much from the Laravel Mix setup in the Tailwind Guides themselves, here: https://tailwindcss.com/docs/installation#build-tool-examples
I use laravel with webpack.mix and I import public google font to app.scss file:
#import url('https://fonts.googleapis.com/css2?family=Rubik:wght#300;400;500&display=swap');
(no one spaces or line breaks in this first string!)
Webpack.mix command looks common:
mix.js('resources/js/app.js', 'public/js').sourceMaps()
.sass('resources/sass/app.scss', 'public/css');
and translate this scss file to css.
BUT in css I get:
#import url(https://fonts.googleapis.com/css2?family=Rubik:wght#300;
400;500&display=swap);
What the hell this weird line break appears from?! Browser cant see the font this way =
I tried npm run dev, run prod. Check original string 20 times...
A workaround is to use %3b instead of ; in your link.
Reference: https://github.com/JeffreyWay/laravel-mix/issues/2430#issuecomment-653915587
I am using laravel/framework v6.16.0, laravel/ui v1.2.0 and TailwinCSS v1.2.0. For setting up, I used the instructions from https://sandulat.com/blog/installing-tailwind-into-laravel/. After minor adjustments concerning the namings, like
tailwind.js => tailwind.config.js
#tailwind preflight; => #tailwind base;
#import 'tailwind'; => #import 'tailwindcss';
everything seemed to work fine and the TailwindCSS classes take effect. My only problem is, that all changes I made in tailwind.config.js are ignored. The files are recompiled (npm run watch), but the changes from tailwind.config.js are not adopted. There are no error messages or other indications.
If I provoke a syntax error in tailwind.config.js, I get an error message. Therefore I conclude that the file is parsed, but as I mentioned without any effect.
Can someone tell me where to start troubleshooting or better tell me where the error could be?
These settings are working for me in a fresh project with Laravel 8, Mix 6, and Tailwind v2:
tailwind.config.js
This file is unmodified except for the added purge settings:
module.exports = {
purge: [
'resources/views/**/*.blade.php',
'resources/js/**/*.js',
'./resources/**/*.vue',
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
webpack.mix.js
This file is unmodified except for the import for tailwind and the appended tailwind settings. Watchout for that extra {} in the second parameter there.
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
/*
|--------------------------------------------------------------------------
| 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')
.vue()
.sass('resources/sass/app.scss', 'public/css', {}, [
tailwindcss('tailwind.config.js'),
])
.options({
processCssUrls: false,
});
app.scss
I just added all three tailwind directives for now. The output is quite large, so some editing may be recommended.
#tailwind base;
#tailwind components;
#tailwind utilities;
The URL in the other answer was critical to making it work. This one here: https://laracasts.com/discuss/channels/elixir/multiple-tailwind-configs-for-theming
This Laracasts user's comment:
https://laracasts.com/discuss/channels/elixir/multiple-tailwind-configs-for-theming
solved this issue for me.
I needed to call mix.sass with [tailwindcss: configfile] as the third parameter. Using the same in .options did not work.
Alright, installing https://github.com/laravel-frontend-presets/tailwindcss solved my problem.
I'm using Laravel 5.7 and i'm applying AMP to our website. (https://amp.dev/).
I'm folowing these steps to convert HTML to AMP: https://amp.dev/documentation/guides-and-tutorials/start/converting/?format=websites
One of the requirements is to replace external stylesheets to internal stylesheets (https://amp.dev/documentation/guides-and-tutorials/start/converting/resolving-errors?format=websites#replace-external-stylesheets). I've done this by doing the following code below:
<style amp-custom>
{!! file_get_contents(public_path('css/app.css')) !!}
</style>
I'm using Sass and I'm using Laravel mix to compile my assets.
This is my webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps()
.version();
But upon doing this I've encountered an error in the AMP:
CSS syntax error in tag 'style amp-custom' - saw invalid at rule '#charset'.
To solve this problem, I must remove the #charset "UTF-8"; in the compiled css css/app.css. And it seems that running npm run dev, its automatically adding #charset "UTF-8"; at the top of the file. How do I remove this?
I'm thinking that I have to add some code in the webpack.mix.js to remove that. But I don't have an idea how to do this.
Yep! SASS adds this directive if your SASS contains any extended (e.g., not standard ASCII) characters. There's an open issue in the SASS project to provide an option to not do this... but they've said they won't provide that option.
For now, it's pretty easy to fix... simply add a step that your build process that hunts for #charset "UTF-8"; and removes it. You can see how I did it here:
https://github.com/ampproject/samples/blob/master/amp-camp/gulpfile.js#L63
gulp.task('styles', function buildStyles() {
const cssEncodingDirective = '#charset "UTF-8";';
return gulp.src(paths.css.src)
... (stuff removed)
.pipe(options.env === 'dev' ? replace(cssEncodingDirective, '') : noop())
... (more stuff removed)
});
If you run 'npm run production', that line will be deleted automatically and you will not get an error in AMP validation.
This is my first experience with Laravel Mix, NodeJS and NPM. I've attempted to follow the documentation from Laravel and believe I am doing it right, but who knows.
I'm attempting to combine several CSS files into one.
webpack.mix.js
mix.combine([
'resources/assets/css/components.css',
'resources/assets/css/plugins.css',
'resources/assets/css/layout.css',
'resources/assets/css/default.css',
'resources/assets/css/custom.css'
], 'public/css/all.css');
if (mix.inProduction()) {
mix.version();
}
Run
npm run dev
It appears to run fine, and outputs the following:
DONE Compiled successfully in 92ms
11:11:33 AM
Built at: 11/23/2018 11:11:33 AM
Asset Size Chunks Chunk Names /css/all.css 0 bytes [emitted] Entrypoint mix = mix.js
The file all.css is created where I expect it to be however it's empty. What am I doing wrong? Thanks!
I belive that combine only works to minify and combine js files. For css you have to use styles
.styles(['inputA.css', 'inputB.css'], 'minified-output.css')
I have not found that in the docs, but I tried it and it works. Credits: https://stackoverflow.com/a/48312321/2311074