awssat / tailwindo Goto Github PK
View Code? Open in Web Editor NEW๐ Convert Bootstrap CSS code to Tailwind CSS code
License: MIT License
๐ Convert Bootstrap CSS code to Tailwind CSS code
License: MIT License
Greetings!
I have been messing around with this codebase a little bit today and have some custom changes I put togeterh. My changes include the following:
--recursive=true
just to make change files much more easy.My big question is if you would like these changes, and if you would, would you prefer one PR or multiple PRs for these changes.
I merged all my changes onto my master branch, and I tried to keep all other branches as clean as possible in case only a one or two of the changes were desired.
Thanks for making this tool!
I think I found a small issue:
.btn-outline-primary {
@apply text-blue-600 border-blue-600 hover:bg-blue-600 hover:text-white bg-white hover:bg-blue-600;
}
has hover:bg-blue-600
twice.
Trying to install and receive the following
Problem 1
- awssat/tailwindo[3.0.0, ..., 3.0.4] require php ^7.2.0 -> your php version (8.1.5) does not satisfy that requirement.
- awssat/tailwindo[3.0.5, ..., 3.0.6] require symfony/console ^4.0|^5.0 -> found symfony/console[v4.0.0, ..., v4.4.41, v5.0.0, ..., v5.4.8] but the package is fixed to v6.0.8 (lock file version) by a partial update and that version does not match. Make sure you list it as an argument for the update command.
Is there any way to convert react-bootstrap, which is using only bootstrap classes, to tailwindcss?
I get this output
C:\webdev\tw-convert
ฮป tailwindo C:/webdev/tw-convert/ --extension=html --replace=true
No file with matching extensions found
I'm looking to convert Bootstrap 3 to Tailwind CSS so that all Bootstrap 3 classes continue to work, but use @apply to map to Tailwind classses.
This tool appears to be working on HTML, but can it work on CSS without the need for a HTML file?
If not, guess I need an HTML file that uses ALL of Bootstrap 3 as an input source...
Tailwindo removed .sr-only
on a div.
This is a common bootstrap/tailwindcss utility: https://tailwindcss.com/docs/screen-readers/
Guessing that's happening because this line is commented out:
wrong loc
When using extract to a single file with the recursive option, a tailwindo-components.css file is create in each directory.
For my use case at least it would be much better to have a merge of all those definitions in a single css file. It could be an option of course.
By the way this is really a great package !
$ composer global require awssat/tailwindo
Using version ^2.0 for awssat/tailwindo
./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
Your requirements could not be resolved to an installable set of packages.
Problem 1
- Installation request for awssat/tailwindo ^2.0 -> satisfiable by awssat/tailwindo[2.0].
- Conclusion: remove symfony/console v4.0.8
- Conclusion: don't install symfony/console v4.0.8
- awssat/tailwindo 2.0 requires symfony/console ^3.0 -> satisfiable by symfony/console[v3.0.0, v3.0.1, v3.0.2, v3.0.3, v3.0.4, v3.0.5, v3.0.6, v3.0.7, v3.0.8, v3.0.9, v3.1.0, v3.1.1, v3.1.10, v3.1.2, v3.1.3, v3.1.4, v3.1.5, v3.1.6, v3.1.7, v3.1.8, v3.1.9, v3.2.0, v3.2.1, v3.2.10, v3.2.11, v3.2.12, v3.2.13, v3.2.14, v3.2.2, v3.2.3, v3.2.4, v3.2.5, v3.2.6, v3.2.7, v3.2.8, v3.2.9, v3.3.0, v3.3.1, v3.3.10, v3.3.11, v3.3.12, v3.3.13, v3.3.14, v3.3.15, v3.3.16, v3.3.2, v3.3.3, v3.3.4, v3.3.5, v3.3.6, v3.3.7, v3.3.8, v3.3.9, v3.4.0, v3.4.1, v3.4.2, v3.4.3, v3.4.4, v3.4.5, v3.4.6, v3.4.7, v3.4.8].
...
- Can only install one of: symfony/console[v3.4.5, v4.0.8].
- Can only install one of: symfony/console[v3.4.6, v4.0.8].
- Can only install one of: symfony/console[v3.4.7, v4.0.8].
- Can only install one of: symfony/console[v3.4.8, v4.0.8].
- Installation request for symfony/console (locked at v4.0.8) -> satisfiable by symfony/console[v4.0.8].
Installation failed, reverting ./composer.json to its original content.
I believe this is because I use FriendsOfPHP/PHP-CS-Fixer
globally, here my global composer.json
file:
{
"require": {
"friendsofphp/php-cs-fixer": "^2",
"laravel/installer": "^2",
"h4cc/wkhtmltopdf-amd64": "^0.12.4",
"h4cc/wkhtmltoimage-amd64": "^0.12.4",
"phpunit/phpunit": "^7"
}
}
I think the following in this package's composer.json
will fix this:
...
"require": {
"php" : "~7.0",
"symfony/console": "^3.0 || ^4.0"
},
...
Bootstrap: 4
Vue: 2
tailwindo --recursive=true --extensions=vue --replace=true ./src
Hello. I'm using this tool to convert a Vue/Bootstrap app to Tailwind. I just wanted to let you know that instances of flex-grow-1
and flex-shrink-1
were not converted. In Tailwind, the corresponding classes are flex-grow
and flex-shrink
.
The project I'm converting is octo (in case you want to see the source).
I've done commands like
tailwindo /resources/views/auth/login.blade.php
& tailwindo /resources/views/ --recursive=true
but nothing changes, stays as bootstrap, any ideas?
-- Laravel Version: 5.7.24
-- PHP Version: 7.2.14
-- Database Driver & Version: MySQL 5.7.25
-- Web Server Driver & Version: nginx/1.15.6
-- OS Driver and Version: Ubuntu 18.04.1
I have installed the package successfully but when run the command I get a error.Any ideas here?
_> /var/www/html# tailwindo resources/views/Staff
tailwindo: command not found
I did install tailwindo using composer but got
command not found
each time i tried using it
I'm trying to install tailwindo, but it requires PHP and Composer. Docs don't say what version of PHP or Composer are required. When I run the installation command I'm getting a message that:
Package awssat/tailwindo has a PHP requirement incompatible with your PHP version, PHP extensions and Composer version
. Can you provide more information on how to configure PHP / Composer to work with this?
Hi there ๐
Thanks for the cool package!
I just wondered if you had any plans to upgrade it to support TailwindCSS 1.x.
What is the status of this project? How good is the conversion, in your (unbiased, of course) opinion? ๐ What kind of things cannot be converted? What happens with them (copied, ignored, warning)?
Also, what about non-bootstrap additional styles in the source file. Are they converted too?
Thanks!
Make a tailwindo to run from a docker. Make a docker image file.
omposer global require awssat/tailwindo
Changed current directory to /Users/shoemoney/.composer
[InvalidArgumentException]
Package awssat/tailwindo has a PHP requirement incompatible with your PHP version, PHP extensions and Composer version
require [--dev] [--dry-run] [--prefer-source] [--prefer-dist] [--fixed] [--no-suggest] [--no-progress] [--no-update] [--no-install] [--no-scripts] [--update-no-dev] [-w|--update-with-dependencies] [-W|--update-with-all-dependencies] [--with-dependencies] [--with-all-dependencies] [--ignore-platform-req IGNORE-PLATFORM-REQ] [--ignore-platform-reqs] [--prefer-stable] [--prefer-lowest] [--sort-packages] [-o|--optimize-autoloader] [-a|--classmap-authoritative] [--apcu-autoloader] [--apcu-autoloader-prefix APCU-AUTOLOADER-PREFIX] [--] []...
โฏ composer -V
Composer version 2.0.9 2021-01-27 16:09:27
โฏ php -v
PHP 8.0.2 (cli) (built: Feb 4 2021 18:57:55) ( NTS )
Copyright (c) The PHP Group
Zend Engine v4.0.2, Copyright (c) Zend Technologies
with Xdebug v3.0.2, Copyright (c) 2002-2021, by Derick Rethans
with Zend OPcache v8.0.2, Copyright (c), by Zend Technologies
When you parse using --components=true
the css file generated works for the most part. The only main problem is that it generates duplicate classes if many elements with the same class exist in the original file.
For example if you have the following:
<div class="alert alert-warning">
some warning alert
</div>
.
some other code
.
<div class="alert alert-danger">
this is a second alert.. but now is danger
</div>
.alert {
@apply relative px-3 py-3 mb-4 border rounded;
}
.alert-warning {
@apply bg-orange-200 border-orange-300 text-orange-800;
}
.
.
.
.alert {
@apply relative px-3 py-3 mb-4 border rounded;
}
.alert-danger {
@apply bg-red-200 border-red-300 text-red-800;
}
see that .alert
is duplicated
Apologies, I would have done a PR but editor reformats your page add a slew of additional diffs. Line 538 is:
'success' => 'bg-green-500 text-white hover:green-600',
But should be
'success' => 'bg-green-500 text-white hover:bg-green-600',
Problem 1 - Installation request for awssat/tailwindo ^3.0 -> satisfiable by awssat/tailwindo[3.0.0]. - Conclusion: remove symfony/console v5.0.5 - Conclusion: don't install symfony/console v5.0.5 - awssat/tailwindo 3.0.0 requires symfony/console ^4.0 -> satisfiable by symfony/console[v4.0.0, v4.0.1, v4.0.10, v4.0.11, v4.0.12, v4.0.13, v4.0.14, v4.0.15, v4.0.2, v4.0.3, v4.0.4, v4.0.5, v4.0.6, v4.0.7, v4.0.8, v4.0.9, v4.1.0, v4.1.1, v4.1.10, v4.1.11, v4.1.12, v4.1.2, v4.1.3, v4.1.4, v4.1.5, v4.1.6, v4.1.7, v4.1.8, v4.1.9, v4.2.0, v4.2.1, v4.2.10, v4.2.11, v4.2.12, v4.2.2, v4.2.3, v4.2.4, v4.2.5, v4.2.6, v4.2.7, v4.2.8, v4.2.9, v4.3.0, v4.3.1, v4.3.10, v4.3.11, v4.3.2, v4.3.3, v4.3.4, v4.3.5, v4.3.6, v4.3.7, v4.3.8, v4.3.9, v4.4.0, v4.4.1, v4.4.2, v4.4.3, v4.4.4, v4.4.5, v4.4.6, v4.4.7, v4.4.8]. - Can only install one of: symfony/console[v4.2.0, v5.0.5]. - Can only install one of: symfony/console[v4.2.1, v5.0.5]. - Can only install one of: symfony/console[v4.2.10, v5.0.5]. - Can only install one of: symfony/console[v4.2.11, v5.0.5]. - Can only install one of: symfony/console[v4.2.12, v5.0.5]. - Can only install one of: symfony/console[v4.2.2, v5.0.5]. - Can only install one of: symfony/console[v4.2.3, v5.0.5]. - Can only install one of: symfony/console[v4.2.4, v5.0.5]. - Can only install one of: symfony/console[v4.2.5, v5.0.5]. - Can only install one of: symfony/console[v4.2.6, v5.0.5]. - Can only install one of: symfony/console[v4.2.7, v5.0.5]. - Can only install one of: symfony/console[v4.2.8, v5.0.5]. - Can only install one of: symfony/console[v4.2.9, v5.0.5]. - Can only install one of: symfony/console[v4.3.0, v5.0.5]. - Can only install one of: symfony/console[v4.3.1, v5.0.5]. - Can only install one of: symfony/console[v4.3.10, v5.0.5]. - Can only install one of: symfony/console[v4.3.11, v5.0.5]. - Can only install one of: symfony/console[v4.3.2, v5.0.5]. - Can only install one of: symfony/console[v4.3.3, v5.0.5]. - Can only install one of: symfony/console[v4.3.4, v5.0.5]. - Can only install one of: symfony/console[v4.3.5, v5.0.5]. - Can only install one of: symfony/console[v4.3.6, v5.0.5]. - Can only install one of: symfony/console[v4.3.7, v5.0.5]. - Can only install one of: symfony/console[v4.3.8, v5.0.5]. - Can only install one of: symfony/console[v4.3.9, v5.0.5]. - Can only install one of: symfony/console[v4.4.0, v5.0.5]. - Can only install one of: symfony/console[v4.4.1, v5.0.5]. - Can only install one of: symfony/console[v4.4.2, v5.0.5]. - Can only install one of: symfony/console[v4.4.3, v5.0.5]. - Can only install one of: symfony/console[v4.4.4, v5.0.5]. - Can only install one of: symfony/console[v4.4.5, v5.0.5]. - Can only install one of: symfony/console[v4.4.6, v5.0.5]. - Can only install one of: symfony/console[v4.4.7, v5.0.5]. - Can only install one of: symfony/console[v4.4.8, v5.0.5]. - Can only install one of: symfony/console[v4.0.0, v5.0.5]. - Can only install one of: symfony/console[v4.0.1, v5.0.5]. - Can only install one of: symfony/console[v4.0.10, v5.0.5]. - Can only install one of: symfony/console[v4.0.11, v5.0.5]. - Can only install one of: symfony/console[v4.0.12, v5.0.5]. - Can only install one of: symfony/console[v4.0.13, v5.0.5]. - Can only install one of: symfony/console[v4.0.14, v5.0.5]. - Can only install one of: symfony/console[v4.0.15, v5.0.5]. - Can only install one of: symfony/console[v4.0.2, v5.0.5]. - Can only install one of: symfony/console[v4.0.3, v5.0.5]. - Can only install one of: symfony/console[v4.0.4, v5.0.5]. - Can only install one of: symfony/console[v4.0.5, v5.0.5]. - Can only install one of: symfony/console[v4.0.6, v5.0.5]. - Can only install one of: symfony/console[v4.0.7, v5.0.5]. - Can only install one of: symfony/console[v4.0.8, v5.0.5]. - Can only install one of: symfony/console[v4.0.9, v5.0.5]. - Can only install one of: symfony/console[v4.1.0, v5.0.5]. - Can only install one of: symfony/console[v4.1.1, v5.0.5]. - Can only install one of: symfony/console[v4.1.10, v5.0.5]. - Can only install one of: symfony/console[v4.1.11, v5.0.5]. - Can only install one of: symfony/console[v4.1.12, v5.0.5]. - Can only install one of: symfony/console[v4.1.2, v5.0.5]. - Can only install one of: symfony/console[v4.1.3, v5.0.5]. - Can only install one of: symfony/console[v4.1.4, v5.0.5]. - Can only install one of: symfony/console[v4.1.5, v5.0.5]. - Can only install one of: symfony/console[v4.1.6, v5.0.5]. - Can only install one of: symfony/console[v4.1.7, v5.0.5]. - Can only install one of: symfony/console[v4.1.8, v5.0.5]. - Can only install one of: symfony/console[v4.1.9, v5.0.5]. - Installation request for symfony/console (locked at v5.0.5) -> satisfiable by symfony/console[v5.0.5].
I have a Rails project which is using HAML as HTML template syntax. I tried converting the contained Bootstrap CSS to Tailwind and it
TLDR about HAML: Instead of e.g. <span class="text-secondary">
the code is %span.text-secondary
.
There are a few extra cases, e.g. if the tag name is div, it can be removed (e.g. <div class="d-none d-md-block">
becomes .d-none.d-md-block
). IDs can also be included like h1#overview
and there are quite a few more cases like attribute syntax (based on Ruby) which allows e.g. generating class names. For more, see the website.
Is there a way to get tailwindo to convert my files?
If not directly: Are there any recommendations how to proceed? E.g. there are tools to convert HAML to HTML (with ERB, which is similar to PHP in HTML and seems to work) and back... which might be included in the processing pipeline.
Furthermore (might be worth a separate issue, if the error is not on my side), the files are called e.g. application.html.haml and neither of the extensions haml, html nor html.haml found any files: tailwindo -e html,haml,html.haml
while calling e.g. tailwindo application.html.haml
directly works but only detects embedded HTML or SVG code.
Good day,
It was by good fortune that I discovered your repo. I went via a standard web search and got to your page here on the Best of PHP site.
However, the links to the documentation on the page don't seem to work (threw an error "Not Found" in plain HTML) and might throw other visitors off.
I see all is here under your GitHub repo, which sorts my problem, though.
Just thought you might want to be made aware of the issue.
On a side note;
I'm quite new to PHP, Laravel 9 and their Symfony dependencies specifically, so it might be a stupid question.
I look forward to using your package, as it will make my life easier as well now.
Thanks!
What would it take to get to support bootstrap 4?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.