I just installed a clean Laravel project with the Jetstream starter kit, so it also installed Tailwind CSS.
I then tried to use the sample code from Tailwind but it won't show up.
This is my simple test code from the Tailwind docs: (from https://tailwindcss.com/docs/hover-focus-and-other-states)
app.blade.php: (You can run the code snippet because this is actually what I get in my project)
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body class="font-sans antialiased">
<button class="bg-red-500 hover:bg-red-700">
Hover me
</button>
</body>
</html>
this is the tailwind.config.js file:
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
mode: 'jit',
purge: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/js/**/*.vue',
],
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
},
},
variants: {
extend: {
opacity: ['disabled'],
},
},
plugins: [require('#tailwindcss/forms'), require('#tailwindcss/typography')],
};
this is the webpack.mix.js file:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
])
.webpackConfig(require('./webpack.config'));
if (mix.inProduction()) {
mix.version();
}
and this is the app.css file:
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
run npm run dev or npm run watch to compile the assets if you didn't already.
You should first run this command npm run dev then run php artisan serve
Related
I am using a CSS file to update my HTML in a Django app, but despite the fact that my "style.css" sheet is linked to the HTML file, there are no updates occuring.
"style.css" is in the same folder as my HTML document ("index.html"), but nothing is changing.
I've pasted my code below:
<head>
<link type="text/css" rel="stylesheet" href="style.css" media="screen"/>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
I know that the CSS and HTML files are linked, because when I hover over the "style.css"href, I can press CTRL + click, and "styles.css" opens in a new window.
I've been through four or five tutorials, tried to restarted the local server, moving "style.css" to its own folder "styles", and then changed href to href="styles/style.css" but it is still not working.
I'm using VSCode, and Windows 11.
you need config template section in django settings
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
be carefull to create static and templates directory in project root or any
place you want and set in "DIR" in TEMPLATES for templates and set static for static files for js and css file. in static directory you must put your js and css file also you can create directory inside static directory called "js" hold js files and create "css" directory inside static for css files.
now render yout html file in view like below
from django.shortcuts import render
def index_view(request):
return render(request, "index.html")
now in your template files you can load static files
<!DOCTYPE html>
<head>
{% load static %}
<script src="{% static 'app.js' %}"></script>
<title>Site</title>
</head>
<body>
<img src="{% static 'img.png' %}" alt="Mon image" />
{% block content %}{% endblock %}
</body>
</html>
in your html file you should add:
{% load static %}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" media="screen" href="{% static 'styles/style.css' %}"/>
<title>Document</title>
</head>
you should add in your setting.py:
STATIC_URL = '/static/'
STATICFILES_DIRS = [
BASE_DIR / "static",
]
also you should declare your folder structure like this:
in your root project (where manage.py declared), static folder and in your static folder you should have styles and in your styles is your style.css file.
static/styles/style.css
Apparently it was just a cache issue. Clearing it took care of this, so I'm now clearing the cache every time I modify anything in the CSS Templates, which comes to clearing the cache basically everyday.
I have a sass file that I want to override the existing stylesheet but I'm unable to see the sass override when I inspect in the browser. I included a screen shot that doesn't show the design system and override:
_titlebar.scss - variable used from design system.
.ui-dialog.active-dialog:not(.ui-dialog-minimized) .ui-dialog-titlebar {
background-color: var(--linq-color-primary-500);
}
_index.css
#import './_status.scss';
#import './_titlebar.scss';
I use a design system in the application that include the core file, a theme file and the material design theme. I removed part of the https for the design system for security reasons below
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>Alio</title>
<link href="app/alio/img/LINQ-logo.svg" rel="shortcut icon" />
<script src="runtime/js/bootstrap.js"></script>
<link href="runtime/css/frames-loader.css" rel="stylesheet" />
**<link href="https://.../theme/blueberry-muffin.css"
rel="stylesheet" media="all" />
<link href="..../snackpaq-core.css"
rel="stylesheet" media="all" />
<link href="https://.../material-theme.css"
rel="stylesheet" media="all" />**
<title></title>
</head>
<body>
<script type="text/javascript">
bs_init();
</script>
gruntfile.js
module.exports = function (grunt) {
var env = grunt.option('env'); // i.e.: --env develop
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
banner: '/*\n' +
' * <%= pkg.name %>\n' +
' * \n' +
' * Version: <%= pkg.version %> (<%= grunt.template.today("yyyy-mm-dd") %>)\n' +
' * Copyright <%= grunt.template.today("yyyy") %> MORPHIS - http://www.morphis-tech.com/\n' +
' */\n',
sass: {
css: {
options: {
sourcemap: env == 'develop' ? 'auto' : 'none'
},
files: {
'css/expanded-default.css': 'scss/expanded-default.scss',
'css/expanded-light.css': 'scss/expanded-light.scss',
'css/expanded-light-rtl.css': 'scss/expanded-light-rtl.scss',
'css/expanded-dark.css': 'scss/expanded-dark.scss',
'css/expanded-dark-rtl.css': 'scss/expanded-dark-rtl.scss',
'css/expanded-purplelight.css': 'scss/expanded-purplelight.scss'
.....
}
}
},
cssmin: {
options: {
banner: '<%= banner %>',
},
css: {
files: {
'css/light.min.css': ['css/light-rtl.css'],
'css/light-rtl.min.css': ['css/light-rtl.css'],
'css/dark.min.css': ['css/dark-rtl.css'],
'css/dark-rtl.min.css': ['css/dark-rtl.css']
}
}
},
watch: {
sass: {
files: [
'scss/**/*.{scss,sass}',
'widgets/**/*{scss,sass}',
'../base/scss/**/*{scss,sass}',
'../base/widgets/**/*{scss,sass}'
],
tasks: ['sass:css']
},
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['sass', 'cssmin']);
};
Can someone please provide a reason why and a solution to what I need to do to get the the sass override to work properly.
i'm trying to deploy my react app through firebase but after deploying i get a blank page and the SyntaxError: expected expression, got '<'. i think this is because it's reading the < from html but i'm not sure how to solve this. below is the index.html form my build folder which is initialized as the source for firebase
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link href="../src/App.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather:900" rel="stylesheet">
<link rel="manifest" href="/CV/manifest.json">
<link rel="shortcut icon" href="/CV/favicon.ico">
<title>Lorenzo Wijtman</title>
<link href="/CV/static/css/main.1b15713e.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript" src="/CV/static/js/main.1b785adb.js"></script>
</body>
</html>
my firebase.json content below
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Your HTML contains this script include:
<script type="text/javascript" src="/CV/static/js/main.30b4dcd1.js"></script>
If you try to load this URL, you will see that you're getting back your original HTML, instead of a JavaScript file. Since you told the browser to expect JavaScript, it is complaining about the angular brackets.
It looks like you're not deploying a /CV/static/js/main.30b4dcd1.js. Since you're telling Firebase Hosting to rewrite everything to /index.html, that's what it does when there is no matching file for a URL.
In my application I am using gulp-inject but I am getting error while I run my gulpfile.js how to fix it?
console :
PS F:\Nissan-Gulp> gulp
[14:38:38] Using gulpfile F:\Nissan-Gulp\gulpfile.js
[14:38:38] Starting 'server'...
[14:38:38] Finished 'server' after 22 ms
[14:38:38] Starting 'inject'...
[14:38:38] 'inject' errored after 19 ms
[14:38:38] Error in plugin 'gulp-inject'
Message:
There is no `read` option. Did you mean to provide it for `gulp.src` perhaps?
[14:38:38] Server started http://localhost:9000
[14:38:38] LiveReload started on port 35729
my code :
gulp.task( "inject", function( ) {
var sources = gulp.src(['./app/scripts/**/*.js', './app/stylesheets/**/*.css' ], {read: false}, {relative: true});
return gulp.src('./app/index.html')
.pipe(inject(sources, {
read: false,
ignorePath: '/app'
}))
.pipe(gulp.dest('./app'));
});
my html code :
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/stylesheets/main.css">
<!-- bower:css -->
<!-- endbower -->
<!-- inject:css -->
<!-- endinject -->
</head>
<body>
<!-- bower:js -->
<!-- endbower -->
<!-- inject:js -->
<!-- endinject -->
</body>
Change this:
.pipe(inject(sources, {
read: false,
ignorePath: '/app'
}))
to
.pipe(inject(sources, { ignorePath: '/app' } ))
Your sources variable already has the read option set - it is an option to gulp.src not gulp-inject. That is why it should be within the argument list for gulp.src as you correctly have it for var sources:
var sources = gulp.src['./app/scripts/**/*.js', './app/stylesheets/**/*.css' ], {read: false}, {relative: true});
ignorePath is an inject option; read is not listed there. gulp-inject description
I'm starting a small web project using ember and a json api.
It contains currently a single page with following content :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Express</title>
<link rel="stylesheet" href="/stylesheets/style.css">
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
<link rel="stylesheet" href="/stylesheets/bootstrap-responsive.min.css">
<link rel="stylesheet" href="/stylesheets/ui-darkness/jquery-ui-1.10.3.custom.min.css">
</head>
<body>
<div class="container">
<script type="text/x-handlebars" data-template-name="index">
<h1>Bookmarks</h1>{{#each controller}}
<div class="span-4">{{title}}
<p>{{description}}</p>
</div>{{/each}}
</script>
<script type="text/javascript" src="/javascripts/require.js" data-main="javascripts/main"></script>
</div>
</body>
</html>
My ember code is the following :
App = Ember.Application.create();
App.Router.map(function() {
this.resource('index', { path: '/' });
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return App.Bookmark.find();
}
});
App.Bookmark = DS.Model.extend({
title: DS.attr('string'),
link: DS.attr('string'),
description: DS.attr('string'),
});
App.Store = DS.Store.extend({
revision: 13,
});
And /bookmarks return a this json result :
{
"bookmarks": [
{
"_id": "51ebd06a5810509f703e2504",
"title": "Stackoverflow",
"link": "http://stackoverflow.com/",
"description": "Q&A"
}
]
}
Most of my handlbars's template works as expected, and only a thing does not, the {{link}} part creates content such as <script id='metamorph-2-start' type='text/x-placeholder'></script>http://stackoverflow.com/<script id='metamorph-2-end' type='text/x-placeholder'></script>
You can see the application running there : http://sleepy-bastion-5858.herokuapp.com/
Does anybody have a clue ?
For binding HTML attributes (such as href, src, title, etc.), use the bind-attr helper. So your template should be:
<script type="text/x-handlebars" data-template-name="index">
<h1>Bookmarks</h1>
{{#each controller}}
<div class="span-4">
<a {{bind-attr href="link"}}>{{title}}</a>
<p>{{description}}</p>
</div>
{{/each}}
</script>