This is my first time using Tailwind and I'm stuck just setting it up.
I'm following a course on Udemy and I've gone over every step twice but mine just isn't working like it is in the video.
Styles applied with Tailwind are working but every time I add something new in, I have to use npm run build-css to see any of the changes.
When watching the video, he'll put in a new style class and just save it then refresh the browser and the changes are there.
Is there something I'm missing here?
I've been hunting around for an answer for a while and can't find any help.
package.json
{
"name": "package.json",
"version": "1.0.0",
"description": "package.json",
"main": "tailwind.config.js",
"dependencies": {
"autoprefixer": "^10.4.7",
"postcss": "^8.4.14"
},
"devDependencies": {
"tailwindcss": "^3.0.24"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build-css": "tailwindcss build -i style.css -o css/style.css"
},
"author": "",
"license": "ISC"
}
tailwind.config.js
module.exports = {
content: ["./*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
};
style.css
#tailwind base;
#tailwind components;
#tailwind utilities;
Using the build command will only update the output file on that instance. You should be using the watch command so the output file is constantly being updated. Here are the scripts I'm using to develop with Tailwind.
/ package.json /
"scripts": {
"start": "react-scripts start",
"build-css": "tailwindcss build -i ./src/input.css -o ./public/output.css",
"watch-css": "tailwindcss build -i ./src/input.css -o ./public/output.css --watch",
"dev": "concurrently \"npm run watch-css\" \"npm start\""
},
Run "npm run watch-css" instead of "npm run build-css" [Replace the file location with your own files. After -i is the location of your input css file, after -o is the location of your output css file].
If you're trying to use React, you can install concurrently to run scripts simultaneously. In this case I'm starting my local ReactJS project and I'm watching the Tailwind output file. Or you could just open two terminals and run both scripts.
There's good information in the TailwindCSS Documentation.
I think you have something missed on html file to link up CSS. I just copy your code and added this html.
Check the screenshot the same structure you have.
https://prnt.sc/knox4-8NCK2e
<!DOCTYPE html>
<html 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">
<title>Tailwind CSS</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="bg-red-300 h-40">
<h1 class="text-2xl">Tailwind CSS works</h1>
</div>
</body>
</html>
Now Run Command :
npm install
npm run build-css
In my case, I run watch instead of build, and it solved my problem.
npm run watch
this would help you.
Related
Inside my package.json file I have a command under scripts below:
"scripts": {
"build-css": "tailwindcss build src/styles.css -o public/styles.css"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"autoprefixer": "^10.3.0",
"tailwindcss": "^2.2.4"
}
}
Here is my file structure
When I try to use my build command and run npm run build:css I get this error
[deprecation] Running tailwindcss without -i, please provide an input file.
I don't understand what I'm doing wrong if I already specified the path under scripts doesn't that mean I already included the input file?
You have to include the -i option and the path to that file when building your CSS using a custom CSS file. For example, change the build-css script in your package.json to be the following.
"scripts": {
"build-css": "tailwindcss build -i src/styles.css -o public/styles.css"
},
I am not sure what went on, but whenever I wanted to add unit testing to my app, I had to add .babelrc file with just the following code:
{
"presets": [
"es2015",
"next/babel"
]
}
Prior to that, I did not need the file and it was just an nextjs app with semantic. So far, so good. Until I decided to rebuild my semantic-ui theme which turned out to be a massive mistake!
This was what I ran: cd semantic && gulp build
This caused my app to stop working whenever .babelrc is present.
These are my package.json scripts:
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"semantic": "cd semantic && gulp build",
"test": "mocha --require babel-core/register --watch-extensions js **/*.test.js"
},
If I attempt to run the next related scripts, I get the following error:
Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/theJuls/Workspace/cbt/client/node_modules/babel-preset-es2015/lib/index.js
If I try to run my unit tests, I get
Error: Plugin 0 specified in "/Users/theJuls/Workspace/cbt/client/node_modules/next/babel.js" provided an invalid property of "default" (While processing preset: "/Users/theJuls/Workspace/cbt/client/node_modules/next/babel.js")
If I remove .babelrc, all the next scripts run normally, however I completely lost my unit tests. Why is this happening? What can I do to fix this?
I am not sure if this is relevant but here is my current file structure:
api/
components/
config/
lib/
pages/
semantic/
store/
.babelrc
package-lock.json
package.json
semantic.json
I am not sure why it suddenly broke, but I have figured out a way around it which is also the more up to date way to do it, as my previous one was deprecated.
First off I had to install the following modules: #babel/core and #babel/register
Changed the .babelrc file to as follows:
{
"presets": [
"#babel/preset-env",
"next/babel"
]
}
Finally, in package.json just slightly change the test command to:
"test": "mocha --require #babel/register --watch-extensions js **/*.test.js"
Since we are now using #babel/register
This made everything come back to normal.
I have some external stylesheets referring from another application in my index.html.
<link href = "www.anotherapplication.com/css/anotherapp.css">
I have the application specific css in my angular-cli.json under "styles" like
"styles": [
"../node_modules/foundation-sites/assets/foundation.scss",
"my-application.scss"
],
Assuming that the base css for my application is the "anotherapp.css" that has to be included before "my-application.scss" but after "foundation.scss".
1) How do I order my css files in this case?
2) Also, Why is it that all the css/scss files defined in the angular-cli.json rendered as internal styles in the html page? (- making it difficult to view source in the chrome developer tools)
Thanks!
I guess you always want to get the current anotherapp.css, otherwise you could of just save the file in the folder like app/legacy/css and modify styles config accordingly. So to always get the current anotherapp.css you can do by using npm package download-cli and modifying some npm scripts and cli configs. Here is the setps:
npm install -g download-cli
add new npm script to your package.json
download": "download --out ./src/app/legacy/css www.anotherapplication.com/css/anotherapp.css"
modify your ng serve/build/etc script like
"build": "npm run download && ng build",
"serve": "npm run download && ng serve"
modify your styles config like:
"styles": [
"../node_modules/foundation-sites/assets/foundation.scss",
"app/legacy/css/anotherapp.css",
"my-application.scss"
],
To test the download script separately just run npm run download
Tip:
For debugging purposes you can name your global style bundles like so:
"styles": [
{ "input": "../node_modules/foundation-sites/assets/foundation.scss", "output": "foundation" },
{ "input": "app/legacy/css/anotherapp.css", "output": "anotherapp" }
{ "input": "my-application.scss", "output": "application" }
],
So this way angular cli instead of just producing one single styles.bundle.js will produce separate bundles like foundation.bundle.js, anotherapp.bundle.js and application.bundle.js
I am working for the first time with Laravel. With the 5.4 version they introduced the laraval mix. I tried to paste my SASS of the static website (I compile this with gulp) into sass files in the resources folder. This goes all well, my SASS will be compiled to the app.css file in the public map.
I have 1 main problem. All images in the sass files (resources/assets/images) are not compiling as I would like to have.
Code in SASS file (resources/assets/SASS/banners.scss)
section.module.parallax-1 {
background-image: url('../images/banner1.jpg');
}
Compiled with mix in (app.css)
section.module.parallax-1 {
background-image: url(/images/banner1.jpg?ef4f135bad144d886f07c8b65f757a85);
}
So instead of compiling the url to css like I have it in my SASS file, it compiles it to something different with the hash at the end. Also, after compiling the sass it generates a images map with the images I used in my SASS files. My images map originally is located at resources/assets/images.
I don't know what I am doing wrong. I've tried to change the url in my sass files but this will not help. Is there someone who can help me out? Or is there a other solution for this?
webpack.mix code / js
const mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
I had the same issue right now. As far as I can see this is no longer the case in the newest laravel mix version. But since its not yet up on npmjs
You can use the following fix:
in webpack.mix.js add
mix.options({
processCssUrls: false // Process/optimize relative stylesheet url()'s. Set to false, if you don't want them touched.
});
Then copy node_modules/laravel_mix/setup/webpack.config.js to your root directory.
(Same as where the webpack.mix.js is)
Find and remove this string from your new webpack.config.js file
{ loader: 'resolve-url-loader' + sourceMap },
When thats done you have to update your npm scripts to use your webpack.config.js file.
In your package.json use these scripts instead
"scripts": {
"dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules",
"watch": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules",
"hot": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot",
"production": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules"
},
I made a folder g in root(C:/) in where I try to install Grunt via npm.
I sucessfull made: npm install -g grunt-cli.
I configured package.json to this:
{
"name": "testing",
"version": "0.0.0",
"dependencies": {
"grunt": "~0.4.5" },
"description": "testing",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"grunt": "^0.4.5"
}
}
So good so far.
BUT: When I try to install Grunt: npm install grunt --save-dev and modules(plugins) then I run into this error: npm WARN package.json testing#0.0.0 No repository field...
I use GitHub where I've forked Grunt and Grunticon.
Then I can't succed with nothing towards installing Grunt...
Any good clues and help in solving this?
Okay, I think I see the problem clearly now. Here are some instructions for getting Grunt running, try to follow these exactly, do not create any other folders as it could cause issues for Grunt or Node.
Create a folder for your project, this can be anywhere on your system.
Save the file you have above as package.json in that folder.
Now install the global Grunt CLI
~$ npm install -g grunt-cli <-- Note this is "grunt-cli" NOT "grunt"
Then go to the new directory you created and run this command:
~/new-directoty$ npm install
This will install the Grunt runtime locally for your project because it is specified in package.json
Create a very simple config file in the new directory and name it Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({ /* your config will go in here */ });
/* multi-task definitions go here */
};
Now try to run Grunt just to test that it works:
~/new-directory$ grunt
After that you are ready to start adding plugins, but that's a bigger topic. Good luck.