I tried using TailwindCSS on MacOS. I installed it with the following command:
npm install -D tailwindcss
Then to create the configuration file, I ran the following command:
npx tailwindcss init
Then I configured my configuration file (tailwind.config.js) to the following code:
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
After adding a few files my explorer looks like this:
Finally, I ran the following command expecting some CSS to appear in my output.css file:
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
I checked my output.css file and it was empty. By the way, in my input.css file I entered the following lines of code:
#tailwind base;
#tailwind components;
#tailwind utilities;
However after running the previous command saw see the following messages in my terminal:
warn - The `content` option in your Tailwind CSS configuration is missing or empty.
warn - Configure your content sources or your generated CSS will be missing styles.
warn - https://tailwindcss.com/docs/content-configuration
Does anyone know why this is not working?
It seems you are exporting the output CSS into ./src.
Try to change the tailwind.config.js into the code below:
module.exports = {
content: ["./dist/**/*.{html,css ,js}"],
theme: {
extend: {},
},
plugins: [],
}
first you click on debug as shown in image and than click on build it will make your style.css written
see this image
[1]: https://i.stack.imgur.com/gPXIk.png
Related
I have initialized a new deno vite app and am trying to configure tailwindcss.
The first thing I did was add tailwindcss and postcss to my import_map.json and cache them:
{
"imports": {
"tailwindcss": "npm:tailwindcss#^3.2",
"postcss": "npm:postcss#^8.4"
}
}
I then generated a tailwind.config.js and postcss.config.js with the npx tailwindcss init -p command.
Lastly, I added the #tailwind rules to my index.css file:
#tailwind base;
#tailwind components;
#tailwind utilities;
At this point, I'm actually getting the lint error Unknown at rule #tailwindcss(unknownAtRules) in my index.css file even though I have the tailwindcss vs code extension installed.
When I run my project with deno task dev I get the "Hello World" text showing up but my tailwindcss classes do not take effect, here is my App.jsx file:
function App() {
return (
<div className="bg-red-500 rounded-lg shadow-xl min-h-[50px]">
<p className="text-white">Hello World</p>
</div>
)
}
export default App
Note: I had to delete the postcss.config.js file in order to even run the app.
Are there any other steps I need to take to get tailwindcss working or is it just not compatible at this time?
It seems TailwindCSS doesn't support Deno, see GitHub disscussion: Tailwind CSS support Deno
eg. running deno run -A npm:tailwindcss init fails immediately:
Uncaught TypeError: acorn.Parser.extend(...).extend is not a function
Alternatively I tried to use Windi CSS, but unfortunately the Vite plugin didn't work:
vite:c15:27:24 [vite] The filename, directory name, or volume label syntax is incorrect. (os error 123), stat 'C:\project\!C:\project\node_modules'
As you know Tailwind is a very popular PostCSS solution. I want to add TailwindCSS in my Angular app running version 11.2.0 or with older versions. How can I do so?
I decided to post and answer my own question because this is a very popular question I have seen through the Angular community recently
Setup TailwindCSS in Angular 11.2.0
Install with npm install -D tailwindcss
Install TailwindCSS plugins(Optional):
npm i #tailwindcss/typography
npm i #tailwindcss/forms
Create a TailwindCSS configuration file in the workspace or project root. Name that configuration file tailwind.config.js
It should look like this:
module.exports = {
prefix: '',
purge: {
content: [
'./src/**/*.{html,ts}',
]
},
darkMode: 'class', // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [require('#tailwindcss/forms'),require('#tailwindcss/typography')],
};
In your styles.scss file add the following TailwindCSS imports
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
if you are using CSS not SCSS, your file should look like this:
#tailwind base;
#tailwind components;
#tailwind utilities;
Making sure TailwindCSS in Angular is working
Go to any of you components and write the following:
<button
class="py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-400">Hello</button>
Now run ng serve, you should see the following button
How to purge TailwindCSS in Production
If we don't purge, our CSS can be very heavy due to all the CSS classes TailwindCSS adds for you. If you purge, all the unused classes will be removed.
The way I figured to do purging in Angular 11.2.0 are the following ways:
A) This is my preferred way. Add this to your building SCRIPT NODE_ENV=production ng build --prod
and your tailwind.config.js file should look like this.
purge: {
enabled: process.env.NODE_ENV === 'production',
content: [
'./src/**/*.{html,ts}',
]
},
B) In your tailwind.config.js file you can set the enabled property inside of the purge property to true. This will run purge all the time, be aware of that.
....
prefix: '',
purge: {
enabled: true,
content: [
'./src/**/*.{html,ts}',
]
},
....
Then you can run ng build --prod and you will see your bundle since getting smaller.
Before purging
After purging
To learn more about Angular (11.2.0 or older version) with TailwindCSS, look at my article
https://dev.to/angular/setup-tailwindcss-in-angular-the-easy-way-1i5l
I am learning laravel version 8.
when trying to install tailwind CSS using the npm command.
npm install tailwindcss#npm:#tailwindcss/postcss7-compat #tailwindcss/postcss7-compat postcss#^7 autoprefixer#^9
Here described what I did step by step
1.installed fresh laravel 8 using laravel installer.
2.run npm install
3.then npm install tailwindcss#npm:#tailwindcss/postcss7-compat #tailwindcss/postcss7-compat postcss#^7 autoprefixer#^9
4.after npx tailwindcss init
5.and edit tailwind.config.js like this
module.exports = {
purge: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {}
},
variants: {
extend: {}
},
plugins: []
};
6.In webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require("tailwindcss"),
require("autoprefixer"),
]);
7.import the tailwind css in app.css
#import "tailwind/base";
#import "tailwind/components";
#import "tailwind/utilities";
8.after run npm run dev. I have faced an error in the command line.
Can anyone HELP me out
I got help with Learn-YT
He suggested editing the code github
the error from the css/app.css. changed the code like this
#import "~tailwindcss/base.css";
#import "~tailwindcss/components.css";
#import "~tailwindcss/utilities.css";
after this, it's working correctly.
The official documentation did not help me, but this is the way I successfully installed Tailwind to Laravel 8:
npm install tailwindcss
Replace content of /resources/sass/app.scss with this:
#tailwind base;
#tailwind components;
#tailwind utilities;
Generate Tailwind config file using command npx tailwind init
Open the tailwind.config.js and change line purge: [], to:
purge: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue"
],
Change content of webpack.mix.js to:
const mix = require("laravel-mix");
const tailwindcss = require("tailwindcss");
mix.js("resources/js/app.js", "public/js")
.vue()
.sass("resources/sass/app.scss", "public/css")
.options({
processCssUrls: false,
postCss: [tailwindcss("./tailwind.config.js")]
});
Then, of course, run npm run dev or npm run prod, and enjoy.
P.S.: If you ran in any case composer require laravel/ui and/or php artisan ui vue --auth after this, you will have to repeat the process since these commands will change content of your files. I advise you to run these commands before configuring Tailwind. Make sure also to first run npm install before all this.
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 have the current version of npm installed and things seem to be OK:
The autoprefixer loads up just fine :
I created a file 'Grunfile.js'in the local project folder:
I am running this on windows 8.1
Where to from here? How do I tell grunt to check the file? How do I call the function from the command line ? Or do I call the function from the command line?
Within your directory you'll need to have 2 files, the package.json and the Gruntfile.js. To create a package.json file run the command npm init.
Next, you need to add the grunt-autoprefixer task to your package.json file which you can do by running npm install grunt-autoprefixer --save-dev.
Then, within the Gruntfile.js it should look something like this:
module.exports = function(grunt) {
grunt.initConfig({
autoprefixer: {
options: {
// Task-specific options go here.
},
your_target: {
// Target-specific file lists and/or options go here.
},
},
});
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.registerTask('default', [
'autoprefixer'
]);
};
For more details on editing the settings on autoprefixer check out the documentation: https://github.com/nDmitry/grunt-autoprefixer
To learn more about Grunt check out https://learngrunt.com