Adding tailwindcss to my Phoenix project seems to have broken a lot of the styling. For example, here is a button before adding tailwindcss:
and here it is afterwards:
What can I do to get the benefits of tailwind without breaking my existing styling?
The reason that the native Phoenix styles break is because Tailwind comes with Preflight, which is a bunch of default styles. Preflight can conflict with whatever native styling you might have. That's why it broke in my case. I was able to solve this problem by adding:
corePlugins: {
preflight: false, },
To module.exports in tailwind.config.js. This disables Preflight and lets the native Phoenix styles stay. If you don't need Preflight this is a good choice.
I found the following stop-gap solution: use the approach described in the section entitled "Using Tailwind without PostCSS" from https://tailwindcss.com/docs/installation.
cd assets/static
mkdir -p css
cd css
npx tailwindcss-cli#latest build -o tailwind.css
In whichever file contains the <head> tag (for example root.html.leex) insert this snippet:
<link href="<%= Routes.static_path(#conn, "/css/tailwind.css") %>" rel="stylesheet">
I got best results by putting that above the line with
<link rel="stylesheet" href="<%= Routes.static_path(#conn, "/css/app.css") %>"/>
Otherwise Tailwind overrides some of the styling that comes with Phoenix.
Related
I'm new to Laravel Breeze and tailwind.
After successfully installed Laravel Breeze and looking at /login page source, I couldn't match the source code and actual page source and would like to know what's going on.
In app.blade.php or guest.blade.app there are the following lines.
<!-- Styles -->
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
But when viewing login page source, it has
<!-- Styles -->
<style>
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}a{background-color:transparent} ...
</style>
<style>
body {
font-family: 'Nunito';
}
</style>
And no javascript is loaded.
I'm expecting to see just the link to public/css/app.css and public/js/app.js but no such thing here.
So if anyone can explain how Laravel Breeze works regarding to including css and js
and how I can extend tailwind css to other pages and use js in other pages, I'd really appreciate.
You need to compile the assets installed with Breeze. To do so, just run the following commands on your project directory:
npm install
npm run dev
If you check the Public folder on your Laravel app, you should see the CSS and JS compiled. Refresh the page, and the style should look OK.
Documentation reference:
https://laravel.com/docs/8.x/starter-kits#laravel-breeze-installation
I'm a bit lost here. I'm NOT new to Laravel Mix so this is really confusing.
I have a layout blade file and it looks something like this
<html> ....
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.js"></script>
<script src="{{ mix('/js/myjs.js") }}></script>
</body>
</html>
The myjs.js is compiled using Laravel Mix and contains dozen of libraries and all of them compile and work properly.
However if I include this
require('katex'); //so it's above everything else to simulate situation from above, when it's included in the layout file
...
and drop the CDN script from the layout file - the Katex library won't work.
I tried using require('katex/dist/katex.min.js') but still nothing. The katex.min.js file in the library and the one in CDN are the same.
I'm not expert on npm and I only use it to fetch libraries and then merge and minify them in my Laravel app.
Can anyone help me pin point the problem here or point me to what am I doing/getting wrong here?
Shouldn't the
<script src="lib1.js"></script>
<script src="lib2.js"></script>
included in the html, and
require('lib1')
require('lib2')
compiled to
<script src="{{ mix('compiled.js') }}"></script>
produce the same thing?
Thanks!
UPDATE:
I'm using Katex to implement this summernote plugin.
Katex should be installed as:
window.katex = require('katex');
I am using Laravel Auth for a website. It seems that Auth is using bootstrap for styling. I would like to disable bootstrap. There is no line that includes bootstrap in my app.blade.php layout so I can't find where is it loaded. How can I disable it?
This is using bootstrap for styling, but name of the css file is app.css.
Go to resources->views->layouts->app.blade.php and delete line
<link href="/css/app.css" rel="stylesheet">
I would like to evaluate the features of pivot grid using simple test html without cmd.
I've read the information from those links but I still couldn't install a working environment
https://docs.sencha.com/extjs/6.0/co...ivot_grid.html
https://www.sencha.com/forum/showthr...out-Sencha-Cmd
http://se.sencha.com/setup-guide/
I've downloaded the core framework ('ext-6.0.1-trial.zip')
and pivot addon ('ext-addons-6.0.1-trial.zip') from sencha site
and unpacked them on my test web server:
www.mydummy.server.org/lib/extjs/ext-6.0.0/ <- framework
www.mydummy.server.org/lib/extjs/package/ <- addon
and tested it calling the pivots in kitchensink example with:
www.mydummy.server.org/lib/extjs/ext-6.0.0/examples/kitchensink/index.html
in such setup they start without errors.
The target location of the addon is a bit strange for me,
I was sure I should unpack addon to the package directory of the framework
www.mydummy.server.org/lib/extjs/ext-6.0.0/package/
but then the kitchensink example doesn't work
(kitchensink calls pivot with ../../../package/pivot )
Now I wonder how should I include framework and addon in own html example,
I've tried something like:
<link href="www.mydummy.server.org/lib/extjs/ext-6.0.0/build/classic/theme-neptune/resources/theme-neptune-all.css">
<script src="www.mydummy.server.org/lib/extjs/ext-6.0.0/build/ext-all.js"></script>
<link href="www.mydummy.server.org/lib/extjs/packages/pivot/build/neptune/resources/pivot-all.css">
<script src="www.mydummy.server.org/lib/extjs/packages/pivot/build/pivot.js"'></script>
<script src="www.mydummy.server.org/lib/extjs/packages/exporter/build/exporter.js"'></script>
The links are ok (no http error) but the simple pivot is not rendered
and framework couldn't load further classes:
[Ext.Loader] Some requested files failed to load.
What is the correct setup of extjs and pivot without cmd?
Thank you,
Annie
Couple things here.
For the KitchenSink, if you open up www.mydummy.server.org/lib/extjs/ext-6.0.0/ in your browser you will be shown an index.html. There will be a green button to show the examples which will point to www.mydummy.server.org/lib/extjs/ext-6.0.0/build/examples/index.html (notice the build dir in there). Then if you click on the KitchenSink it will load from www.mydummy.server.org/lib/extjs/ext-6.0.0/build/examples/kitchensink/ (once again, notice the build dir). This is due to the KitchenSink being a Cmd app which will build to that build dir. The examples dir outside the build dir is the development version of the app which is why we still provide it for the source.
Next, about how to use the pivot grid's Cmd package outside of the Cmd package. we build the Cmd package so if you look in the package's build dir you should see a built JavaScript and CSS file that you can load via <script> and <link> in your HTML.
<html>
<head>
<title>Pivot Grid Test</title>
<link href="http://releases/ext/6.0.1.250/build/classic/theme-neptune/resources/theme-neptune-all.css">
<script src="http://releases/ext/6.0.1.250/build/ext-all.js"></script>
<link href="http://localhost/ext-addons-6.0.1/packages/pivot/build/neptune/resources/pivot-all.css">
<script src="http://localhost/ext-addons-6.0.1/packages/exporter/build/exporter.js"></script>
<script src="http://localhost/ext-addons-6.0.1/packages/pivot/build/pivot.js"></script>
</head>
<body></body>
</html>
Notice I have the exporter.js loading before pivot.js and this mostly works except that I do see something that I'd call a bug for us. In pivot.js, we define Ext.ux.ajax.PivotSimlet which extends Ext.ux.ajax.JsonSimlet (which is in the framework's ux package). This is fine to extend like this but PivotSimlet would only be needed if you want to have simulated data in your application (which most wouldn't unless in dev). Two ways you can fix this, remove that class from pivot.js or include the ux's JavaScript/CSS (however that package contains a lot of code that you may not need).
Thanks a lot for your explanation.
I've added these classes to get an working example:
<script src="http://releases/ext/6.0.1.250/packages/ux/src/ajax/Simlet.js"</script>
<script src="http://releases/ext/6.0.1.250/packages/ux/src/ajax/DataSimlet.js"</script>
<script src="http://releases/ext/6.0.1.250/packages/ux/src/ajax/JsonSimlet.js"</script>
Im trying to use Skeleton Boilerplate. I downloaded the basic zip, comes with images folder only holding a favicon, normalize.css, skeleton.css, and a very basic index.html. When I try styling the index with my own linked css, just a basic thing like a background color on the single div, or changing the text or title, it takes FOREVER to refresh the page. Its supposed to be super lightweight and looks to be, idk whats going on
Remove the 'Font' link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css" from index.html Skeleton and it should work at correct speed. It was what was slowing it down on my comp. Hope it helps.
Actually you just have to add the "https:" to the link.
Thats it!
Loading jQuery remotely is probably why you are having loading issues. In particular, if you download jQuery and replace <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> inside index.html to point to your locally downloaded version of jQuery, things should be as fast as expected.
As Thinnling said, you should remove or edit the Google Font link.
index.html:
Old:
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
New:
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
skeleton.css:
(line 123)
body{ font-family: 'Raleway', sans-serif; }