I've installed tailwind using npm install tailwindcss and I wrote
#tailwind base;
#tailwind components;
#tailwind utilities;
in input.css file, but it does not recognize #tailwind command and it gives error. When I run build command output.css file has only 500 lines of css code.
I use VSCode, and tailwind v3.
I configured everything according to the official tailwind docs.
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'
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
I am pretty new to Tailwind and CSS as a whole and am trying to build this CSS file:
#tailwind base;
#tailwind components;
#tailwind utilities;
.btn{
#apply rounded-full py-2 px-3 uppercase text-xs font-bold cursor-pointer tracking-wider
}
With this command
npm run build-css
But I get this response
> course#1.0.0 build-css C:\Users\user\Tailwind\project
> tailwindcss build src/styles.css -o public/styles.css
[deprecation] Running tailwindcss without -i, please provide an input file.
Done in 3220ms.
And nothing happens. How do I specify the input file?
As error says, you need to provide input file with -i flag. Change your script inside package.json to this
tailwindcss -i src/styles.css -o public/styles.css
More information about Tailwind CLI is here
You can try the below command,
npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css
Where the file after -i is your source css file where you have extracted the custom css components and -o is where you want your final build file.
For more, have a look at the link in tailwindcss website - Using Tailwind CLI
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.
So this is my first time using Typescript and Tailwind. I already followed tailwind guide for create-react-app but when I try to run npm start I got this error:
./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
TypeError: Object.entries(...).flatMap is not a function
at Array.forEach (<anonymous>)
this is my index.css
#tailwind base;
#tailwind components;
#tailwind utilities;
body {...
I got warning in index.css Unknown at rule #tailwind css(unknownAtRules)
and this is my index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<div className="px-4 py-2 bg-green-500 text-white font-semibold rounded-lg hover:bg-green-700">tombol</div>
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
This is strange. Try to update your Node.js to the latest current stable version and try again.
Update NodeJS using nvm by following the steps from this link:
https://learn.microsoft.com/en-us/windows/nodejs/setup-on-windows
Make sure you have uninstalled the previous node_modules folder from your project.
Follow these steps
Install RimRaf:
npm install rimraf -g
And in the project folder delete the node_modules folder with:
rimraf node_modules
Reference: How to Delete node_modules - Deep Nested Folder in Windows
Add VS Code extension postcss language support
Create or edit .vscode/settings.json and add:
{
"files.associations": {
"*.css": "tailwindcss"
}
}
Additionally the VSCode extension is helpful - these notes are from their docs.