I am fairly new to tailwindcss. I got their installation stuff working but I want to make changes in the dir files. I want my index.html outside from the src folder, but everytime I move it outiside src the tailwind class does not work.
here's my directory tree
package.json
"devDependencies": {
"tailwindcss": "^3.0.12"
}
}
tailwind.config.js
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/dist/output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold text-purple-700">
안녕하세요
</h1>
</body>
</html>
You need to change the content field in the tailwind.config.js file. In your current project settings, html and js source files should be in directory {project_directory}/src/. In your current settings, the project directory structure should be as follows:
project_directory/
|
|--- tailwind.config.js
|
|--- dist/
| |
| |--- output.css
|
|--- src/
|
|--- input.css
|
|--- index.html
|
|--- main.js
You can move source files to different directories by updating field content in file tailwind.config.js. In the example below, the definition in the content field in the tailwind.config.js file is to show that the index.html file can be located in the project root directory. For more information, read the document in the references section.
module.exports = {
content: [
'./components/**/*.{html,js}',
'./pages/**/*.{html,js}',
'./index.html',
]
}
If you want to move the index.html file to the project root, update the content field in the tailwind.config.js file as follows:
module.exports = {
content: [
'./src/**/*.{html,js}',
'./index.html'
]
}
References
Configuring Source Path - Pattern Recommendations
using the chrome inspector tool console, check if the css file is loaded. If it shows 404 error, your css file link is wrong.
Related
I'm building a javascript app with vite.
I want to use tailwind for quick styling but setting it up in my project is something I struggle with all the time.
From the experience I've set it up but it's not working and I don't know why..
I suspect it is because of my change of root directory in the vite project.
My homepage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link href="/src/style/output.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hermes</title>
</head>
<body>
<h1>My homepage</h1>
Test
<div id="app" class="h-14 bg-gradient-to-r from-purple-500 to-pink-500">h</div>
<script type="module" src="../main.ts"></script>
</body>
</html>
My tailwind config:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/views/*.html"],
theme: {
extend: {},
},
plugins: [],
}
My main.css (input file by tailwind)
#tailwind base;
#tailwind components;
#tailwind utilities;
The output file which is linked in the html, is full of the basic style rest by taildwind
This is my folder structure:
I believe you need to create the postcss.config.cjs file manually with this content:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
The tailwind docs make it sound as though npx tailwindcss init -p will automatically create postcss.config.cjs but that didn't happen for me.
Install tailwindcss and its peer dependencies via npm, and then run the init command to generate both tailwind.config.cjs and postcss.config.cjs.
Once I added postcss.config.cjs and restarted the dev server the styles were applied.
I am using Astro Tailwind integration, and I am trying to add some tailwind classes to MainLayout.astro which resides in layouts directory as follows
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<main class="mx-20 mb-20 md:mb-28 xl:container xl:mx-auto">
<slot />
</main>
</body>
</html>
But styles are not getting applied to the <main> tag (according to browser dev tools inspection), but styles to the rest of the pages are getting applied.
What I have tried?
Restarting the dev server
Edit:
tailwind.config.cjs look like below
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
...
};
Edit 2:
astro.config.mjs
import { defineConfig } from "astro/config";
import react from "#astrojs/react";
import image from "#astrojs/image";
import tailwind from "#astrojs/tailwind";
// https://astro.build/config
export default defineConfig({
integrations: [
react(),
tailwind(),
image({
serviceEntryPoint: "#astrojs/image/sharp",
}),
],
});
I am working on a Firestore, Vue project and having an issue with building my project. Running the non-built files on a local server works just fine and after running the build command, the files all appear to be correct. However, after uploading the files to Firebase (or creating a local server using the built files using the firebase serve command), it just shows a blank page. So I inspected the files and the css and js files are the exact same as the HTML file.
I know that this guy had the same issue, Upload to Firebase Hosting not working correctly, but I have gone through every file I feel like may be the culprit and still cannot find where the issue is — although that may just be due to my lack of knowledge in how webpack works. I think it may be some misconfiguration in the vue.config.js file but not sure. I would appreciate any help in getting my project hosted! Thanks!
Here is my file structure:
- dist
- src
- assets
- css
- img
- js
- favicon.ico
- index.html
- public
- index.html
- src
- App.vue
- main.ts
- .firebaserc
- firebase.json
- package.json
- vue.config.js
Compiled index.html
<!DOCTYPE html>
<html lang=en>
<head>
<meta http-equiv=Content-Type content="text/html; charset=UTF-8">
<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=msapplication-tap-highlight content=no>
<meta name=description content="Steel Tech of the Ozarks designs & manufactures pre-engineered metal buildings, driven by an intentional, no-compromise passion for excellence.">
<meta name=keywords content=steel,building,metal,structural,design,manufacture>
<title>Company Name</title>
<link rel="shortcut icon" href=../src/assets/favicon/favicon.ico>
<meta name=theme-color content=#6e8995>
<link as=style href=/dist/src/assets/css/app.64e0dd85.css rel=preload>
<link as=style href=/dist/src/assets/css/chunk-vendors.9e123139.css rel=preload>
<link as=script href=/dist/src/assets/js/app.00d6273a.js rel=preload>
<link as=script href=/dist/src/assets/js/chunk-vendors.90527da6.js rel=preload>
<link href=/dist/src/assets/css/chunk-vendors.9e123139.css rel=stylesheet>
<link href=/dist/src/assets/css/app.64e0dd85.css rel=stylesheet>
</head>
<body>
<noscript>
<strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id=app>
<script src=/dist/src/assets/js/chunk-vendors.90527da6.js></script>
<script src=/dist/src/assets/js/app.00d6273a.js></script>
</body>
</html>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="msapplication-tap-highlight" content="no">
<title>Company Name</title>
<link rel="apple-touch-icon" sizes="180x180" href="../src/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="../src/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="../src/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="../src/assets/favicon/site.webmanifest">
<link rel="mask-icon" href="../src/assets/favicon/safari-pinned-tab.svg" color="#ff6600">
<link rel="shortcut icon" href="../src/assets/favicon/favicon.ico">
</head>
<body>
<noscript>
<strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<!-- Built files will be auto injected -->
<div id="app"/>
</body>
</html>
App.vue
<template>
<v-app>
<router-view/>
</v-app>
</template>
main.ts
import Vue from 'vue'
import App from './App.vue'
import router from '#/router'
import store from '#/store'
import '#/plugins/vuetify'
Vue.config.productionTip = false
new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app')
.firebaserc
{
"projects": {
"default": "schedule-maxx"
}
}
firebase.json
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
vue.config.js
module.exports = {
runtimeCompiler: true,
lintOnSave: true,
productionSourceMap: false,
outputDir: 'dist',
assetsDir: 'src/assets',
baseUrl: process.env.NODE_ENV === 'production' ? '/dist/' : '/',
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8081',
changeOrigin: true,
pathRewrite: {
'^/api': '/api/v1'
}
}
}
}
}
With regards to your file structure, in particular:
dist
public
index.html
and to the fact that you rewrite to /index.html (cf. firebase.json file)
I think that your firebase.json file should start as follows. (However, since you don't show what's in the dist directory I am not 100% sure!):
{
"hosting": {
"public": "public",
....
}
}
and the static directory generated by webpack should also be deployed under the public directory. It is most probably under the dist directory for the moment.
It looks like I just had my vue.config.js file configured incorrectly. I changed the baseUrl field from '/dist/' to '.' and the file paths in the compiled files were correct.
In my gruntfile.js I am using bower install to create the necessary script tags in my index.html for all my js libraries. My grunt file entry looks like this:
bowerInstall: {
target: {
src: ['wwwroot/index.html'],
cwd: '',
dependencies: true,
devDependencies: true,
exclude: [],
fileTypes: {},
ignorePath: '',
overrides: {}
}
}
My index.html gets correctly updated from my index.html.tpl as seen here:
<head>
<!-- bower:js -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="../bower_components/underscore/underscore.js"></script>
<!-- endbower -->
<!-- bower:css -->
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<link rel="stylesheet" type="text/css" href="wwwroot/app/styles/style.css" />
What I want to happen is to copy all js library files to a specific lib directory, and then link them from there. Can this be accomplished with bower install or is there another grunt plug-in I should be using? The bower-install plugin seems popular but I can't find much documentation for it.
You should try to use grunt-bower along with grunt-bower-install. You can configure bower to install copy files to specific folders. It will look like this:
bower: {
dev: {
dest: 'lib/',
js_dest: 'lib/js',
css_dest: 'lib/styles'
}
}
Then if you run the task:
grunt bower
You will have something like this in your lib folder:
/js
/package1
package1_file1.js
package1_file2.js
/package2
package2.js
/styles
/package1
package1.css
/package2
package2.css
Add a .bowerrc file next to your bower.json. If the file is already in there change its content from:
{
"directory": "bower_components"
}
to
{
"directory": "you/new/lib/path"
}
Re-install your Bower components:
bower install
Then call the Grunt task:
grunt bowerInstall
yo angular install bootstrap files all fine. The index.html file looks like this at the moment:
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
This doesn't include bootstrap.theme.css file.
What is the recommended way of adding this? Do I manually go in there and add it?
The correct way to do it is override you bower.json file to load bootstrap dependencies, and then run grunt wiredep
The bower.json would look like this:
{
"name": "frontend",
"version": "0.0.0",
"dependencies": {
"angular": "^1.3.0",
"json3": "^3.3.0",
"es5-shim": "^4.0.0",
"bootstrap": "^3.2.0",
"angular-cookies": "^1.3.0",
"angular-route": "^1.3.0",
"angular-local-storage": "~0.1.5",
"raty": "~2.7.0",
"kineticjs": "~5.1.0"
},
"devDependencies": {
"angular-mocks": "~1.3.0",
"angular-scenario": "~1.3.0"
},
"appPath": "app",
"overrides": {
"bootstrap": {
"main": [
"less/bootstrap.less",
"dist/css/bootstrap.css",
"dist/css/bootstrap-theme.css",
"dist/js/bootstrap.js",
"dist/fonts/glyphicons-halflings-regular.eot",
"dist/fonts/glyphicons-halflings-regular.svg",
"dist/fonts/glyphicons-halflings-regular.ttf",
"dist/fonts/glyphicons-halflings-regular.woff"
]
}
}
}
Source: https://github.com/yeoman/generator-angular/issues/965#issuecomment-68548259
Do the following
bower install bootstrap-css --save
Add it manually below the other .css include if it's locally available on your system (e.g. in bower_components/).
If the file is not locally available I'd add it right above the <!-- Place favicon.ico ... --> otherwise it might break your grunt build and/or grunt serve because of bower trying to minify the file.
The same goes with Google Font imports, place them above the <!-- Place favicon.ico ... --> otherwise bower will try to minify it (under htmlmin options in Gruntfile.js).
Here you can read some more about the subject.