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
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'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.
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
When I run:
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
My output.css gets mostly deleted, and only contains a handful of tailwind css, see image:
I have to run:
npx tailwindcss-cli#latest build ./src/input.css -o ./dist/output.css
to rebuild the file which gets all the tailwind css see:
But when I run:
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
it deletes the output.css again!
I've cleared the NPM cache, re-installed Tailwindcss on a new project and it produces the same issue.
Any help would be welcome, just starting out with backend programming!
If you use the build command tailwind iterate over your content and check which styles you are use. The other styles are purged. That is a feature of tailwind and makes sure you don't load all the overhead styles you don't use into the CSS file.
I'm trying to generate tailwindcss to last.css file with npx on Ubuntu.
Npx version --> 6.14.4
Ubuntu ---> 20.04
However it isn't working.
My code it's the next:
npx tailwindcss build src/styles.css -o public/last.css
This it's the mistake I'm receiving.
Invalid or unexpected token
Thanks!
try this:
npx tailwindcss -i src/styles.css -o public/last.css
this will generate a css file from src/styles.css to public/last.css
if you want to minify try this:
npx tailwindcss -i src/styles.css -o public/last.css --minify
and if you want it to purge unused styles you can try Purgecss